含义:并非让浮动失效,因浮动后经常出问题,意指清楚浮动带来不好的影响(高度塌陷)
方法:
1.给受到浮动影响的元素添加overflow:hidden-因为overflow属性会触发 BFC
(会承认浮动元素为行内块元素 下面的元素会上去跟浮动元素一行)
1.给浮动元素的父元素加overflow:hidden (会承认整个父元素为独占一行的块元素 下面的元素会在下一行/父元素没写宽高的话也不会变成0而且被撑开拥有宽高)
弊端:子元素定位超出范围会隐藏
BFC: block formatting context 块级格式化上下文-让元素强制按照块元素的规则进行排列
2.在受到浮动影响的元素前面,添加一个空div,给空div添加样式:clear:both
3.在浮动元素的父标签的伪元素选择器:after中加content空、转块并clear:both - 类似于空div(会承认整个父元素为独占一行的块元素)
额外讲讲margin塌陷和margin合并的问题
1.margin塌陷 父子盒子
含义:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margin-top,会错误放在父元素上面
解决方法:给父元素添加overflow:hidden;
2.margin合并 兄弟盒子
含义:两个相邻元素上下的margin值不会叠加,按照较大值设置
解决方法:给其中一个元素添加父标签并写overflow:hidden;