关于overflow清楚浮动的问题

西瓜遇上冲锋枪
  • 32

Overflow设置为hidden 之后能解决父级元素不能包含含有浮动属性的子元素,他的原理是什么?为什么这样设置就可以完成这个效果

回复
阅读 2.1k
3 个回答

其实搜一下“为什么overflow可以清除浮动”就可以得到答案。。

可以看一看CSS中与BFC相关的内容~

块格式化上下文block formatting context(BFC) 是页面 CSS 视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响范围的一个区域。如何创建一个BFC?有如下几个方式:
1.根元素或其他包含它的元素(如HTML标签);
2.浮动(元素的float不为none);
3.绝对定位(元素的position为absolute或fixed);
4.行内块inline-blocks(元素的display为inline-block);
5.表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性);
6.表格标题 (元素的 display: table-caption, HTML表格标题默认属性);
7.overflow的值不为 visible的元素;
8.弹性盒 flex boxes (元素的 display: flex或 inline-flex);
将元素设置的overflow设置为hidden,此区域将成为BFC区域,BFC内子元素不能影响到外界元素,会达到清除浮动的效果。如果你将元素的display设置为inline-block,也会有相同效果。
另外清除浮动最好用:

.clearfix { 
  *zoom: 1; 
} 
.clearfix:before, 
.clearfix:after { 
  display: table; 
  line-height: 0; 
  content: ""; 
} 
.clearfix:after { 
  clear: both; 
} 

父级元素不能包含含有浮动属性的子元素,是因为css塌陷吧,然后解决这种问题的方式好多都用clear:both 来清除浮动

你知道吗?

宣传栏