作者jasonchris (已经醒了)
看板Web_Design
标题[问题] 一个div+css的问题
时间Mon Sep 28 10:11:15 2015
大家好，我目前还停留在div+css切版的学习阶段，
最近遇上了一个问题，就是外围有一个大div，高度设为自动(auto)，
之後里边要插入两个div(里边div内容会一直增加内容)
这时候问题来了，最外围的div会因为里边有设浮动而脱离文档流，就无法
包覆里边的div，因此我去查找了，大概有三种方法可以解决：
想请问这些方法的差别?
以下是程式码：
<!doctype html>
<html>
<head>
<style>
.clear:after {
content:'';
display:block;
clear:both;
}
#outwrap_1{
width:1000px;
height:auto;
margin:0 auto;
background:#666;
overflow:hidden;
}
#outwrap_2{
width:1000px;
height:auto;
margin:20px auto 0;
clear:both;
background:#06C;
}
#outwrap_3{
width:1000px;
height:auto;
margin:20px auto 0;
background:#ccc;
}
.ex_1a{
float:left;
width:400px;
height:500px;
margin:50px;
background:#096;
}
.ex_1b{
float:left;
width:200px;
height:700px;
background:#FF0;
}
</style>
</head>
<body>
<!-- 第一种是最外围div的css为height:auto;overflow:hidden;-->
<div id="outwrap_1">
<div class="ex_1a"></div>
<div class="ex_1b"></div>
</div>
<!-- 第二种是在里边塞入一个div 且设css为 .clear:both;-->
<div id="outwrap_2">
<div class="ex_1a"></div>
<div class="ex_1b"></div>
<div class="clear"></div>
</div>
<!-- 第三种则是最外围的div 给一个class的css属性为.clear:after-->
<div id="outwrap_3" class="clear">
<div class="ex_1a"></div>
<div class="ex_1b"></div>
</div>
</body>
</html>
想请问这样的差别是?
--
不停追着自己的目标
人不可以穷死
人不可以气死
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 36.234.180.213
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1443406278.A.D87.html
1F：→ miau: 第一个当你里面有用到超出范围的绝对定位元素就会被隐藏 09/28 14:34
2F：→ miau: 第二个会多一个没用的div只是用来做clear 09/28 14:35
4F：→ miau: 比较好读 09/28 14:37