场景:父元素是一个没有样式的div
/ul
/等其它类block元素,子元素里面设置浮动,父元素就会发生塌陷问题,这个现象是在页面设计中过程中会发生的十分经典的情况。
前排提示
- 由于浮动会对后面的元素造成影响,所以在书写html结构的时候应该从上到下、从左到右、从里到外的顺序书写,另外,每一行都需要单独的包起来。
解决方法
- 使用伪类(好用的的放前面),操作简单兼容性高别问我为什么谁用谁知道,并且推荐使用一个公共的类名
.clearFix
来设置它,需要清除塌陷父元素只要调用这个伪类就够了,这样就会减少代码的冗余度:
//在父元素里添加这个类
.clearFix:after{
content:"";//设置为空
display:block;//将伪元素转化成块元素
clear:both;//清除浮动
}
- 给父元素设置高度(例):
height:100px;
- 后面的元素设置
clear
属性,浮动在哪一边就设哪一边的clear(例):
clear:left/right/both;
- 在子元素后面添加一个空的
div
(不会影响到其它元素),设置清除两边浮动(例):
<div>
<div class="classss">
这里是内容,这个区域被浮动了。
</div>
<div style="clear:both;"></div>
</div>
- 设置溢出清除
overflow:hidden;
只要不是visible就行(例):
<div style="overflow: hidden;">
<div class="classss">
这里是内容,这个区域被浮动了。
</div>
</div>
- 为父元素设置透明边框(例):
<div style="border:1px solid transparent;">
<div class="classss">
这里是内容,这个区域被浮动了。
</div>
</div>
- 为父元素设置
padding
,只设置一个也可以(例):
<div style="padding-top:1px;">
<div class="classss">
这里是内容,这个区域被浮动了。
</div>
</div>
- 使用BFC解决问题(前面的
overflow
方法已经使用了这个思想),BFC(Block Formatting Context)块级格式上下文。BFC就好像一个城池的围墙,如果给父元素加上一个围墙(BFC),那么就能够让里面的元素无法逃脱父元素的区域,在表现形式上就可以达到清除浮动的效果。
(1)使用inline-block
触发BFC,当元素不是行内块元素时,可以通过display:inline-block的样式代码使之转化为行内块元素来触发BFC。
<div style="display:inline-block;">//父元素设施成行内块元素
<div class="classss">
这里是内容,这个区域被浮动了。
</div>
</div>
(2)给父元素设置成浮动来触发BFC(太骚了)。
<div style="float:left/right;">//父元素设置浮动
<div class="classss">
这里是内容,这个区域被浮动了。
</div>
</div>
(3)给父元素设置成绝对/固定定位来触发BFC,因为绝对/固定定位能使父元素脱离了文档流(相对定位不可以)。
<div style="position:absolute;">//父元素设置绝对定位
<div class="classss">
这里是内容,这个区域被浮动了。
</div>
</div>
(4)给父元素设置overflow
(前面提示过了)。
前面查看
后排提示
元素设置为浮动后会提高层级,从而会覆盖后面的文档元素(这里不是塌陷问题了!是float的重叠覆盖!)。如果要防止这种覆盖,可以通过display:inline-block
转发为行内块元素,或将文档流元素也设置为浮动元素来出发BFC。
<div>
<div style="float:left; width:200px; height:200px;">
这里是内容,这个区域被浮动了。
</div>
<div style="width:200px; height:200px; display:inline-block">//转换为行内块元素,触发BFC
这里是内容。
</div>
</div>