条件:
父元素中有子元素float的话,可能就会影响父元素的高度,从而影响布局;
解决方案:
1.直接给父元素定高;
弊端:必须知道父元素的高;
2. 父元素使用overflow属性值为hidden解决;(父元素触发bfc)
弊端:会隐藏溢出的内容,(当需要隐藏时使用,按需使用)
为什么用这个属性可以清除浮动带来的影响呢?
当父元素存在height时(如30px),子元素(如50px)则会被溢出隐藏(只显示30px)。
但是当父元素不存在高度时,此时设置overflow:hidden,则浮动的子元素还会撑开父元素,
因为块级格式化上下文通常可以包含浮动
父元素创建了新的BFC,创建了的BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC任然属于文档中的普通流。
3.在父元素中最后面未知添加一个块级元素或table属性元素,并加clear属性值为both;
弊端:页面中多了一个空元素(影响不大,算是很nice)
4.父元素:after伪元素
div:after{
content:"";
display:block;
clear:both;
height:0;
}