标签：color padding tom 多个 border add owb 不能 bbb
我所知的常用的布局技巧有四种，原来的三种（1.float布局 2.position布局 3.table布局）以及现在css3新增的flex布局。这四种布局各有优劣
1.会以某种方式将浮动元素从文档的正常流中删除，其他元素会环绕该元素
2.float属性的元素会自动生成块级框，按照块级元素来处理，display：block也可以使用，不过没有具体意义
3.浮动元素的规则：
对上面规则的解释
放上一段这样的html代码
1 <div style="border: solid 5px #333; width:300px;"> 2 3 <div id="redBox" style="height: 100px; width: 100px; background-color: Red; "> 4 </div> 5 <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;"> 6 </div> 7 <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;"> 8 </div> 9 </div>
将redBox改为float:left之后
greenBox消失了，说明浮动元素首先是从父元素中扣出来，形成新的一层，然后开始浮动。对于原有的元素会覆盖
然而，在greenBox加入文字之后呢，
看起来像是在yellowBox里加了文字一样，这是因为文本元素会环绕浮动元素排列，也就是“流动”，而greenBox高度只有100px，所以挤到了他的下边界之外
但是如果greenBox的高度不设置呢，将greenBox的height属性去掉，
高度随着文本流改变，就会出现和行高等高的greenBox
如果redBox之后的父元素中有很多文本，就会出现这种情况，
这就解释了1.会以某种方式将浮动元素从文档的正常流中删除，其他元素会环绕该元素
可以这样理解，css每次处理到浮动元素时是不管这个浮动元素上面的元素的，对于这样一段代码
<div style="border: solid 5px #333; width:300px;"> <p>xxxxxxxxxxxxxxx</p> <div id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left "> </div> <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;"> </div> <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;"> </div>
</div>
会出现这样的现象
也就述说浮动是以当前浮动元素的原上边界作为浮动的上边界的。
而且浮动块会尽可能的向一个方向浮动，但是不能覆盖其他浮动元素，超出边界 则另起一行
看下面一段代码：
<div style="border: solid 5px #333; width:300px;"> <div id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left "> </div> <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;float:left"> </div> <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;"> </div> </div>
如果含有多个浮动块
<div style="border: solid 5px #333; width:300px;"> <div id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left "> </div> <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;float:left"> </div> <div id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left "> </div> <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;float:left"> </div> <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;"> </div> </div>
这时又会发现，浮动块跑到了父元素的外面，这是因为浮动块是相当于从父元素抠出来的，所以不占位置，所以会超出下边界。
关于父元素塌陷的相关内容，具体可以看这篇博客：http://blog.csdn.net/GoodShot/article/details/44348525
clear：left | right | both | none | inherit
clear:left clear:right 分别是清除左右浮动，clear:both是清除所有，看下面的例子
<div style="border: solid 5px #333; width:300px;"> <div id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left "> </div> <div id="greenBox" style="height: 120px; width: 100px; background-color: Green;float:right"> </div> <div id="yellowBox" style="height: 100px; width: 300px; background-color: Yellow;"> </div> </div>
然后给yellowBox分别设置clear:left，clear：right，clear：both；
以上是我关于浮动的理解
标签：color padding tom 多个 border add owb 不能 bbb
原文地址：http://www.cnblogs.com/Taniffer/p/6785449.html
