width：100%;overflow：hidden;消除浮动的原理是什么？
width:100%;
应该是指定元素的宽度为父元素的100%，对于块级元素，这条代码应该没用，因为块级元素是默认宽度100%的。
overflow：hidden;
这条代码应该是指定超出元素框的内容不可见
为什么这两条代码加在一起就能消除浮动子元素的影响呢？而单用overflow:hideden却不行
求大神回答
xlfsummer
2015-08-07
1 回答
还是我自己来填这个坑吧
先说说 overflow: hidden; 这句话意思是对于超出父元素框线外的子元素将被隐藏，大家都知道，如果一个元素的子元素都使用了浮动，并且该元素没有设置高度，那么这个元素本身的高度就回塌陷到0。此时该元素的所有子元素都会在元素框外，使用了这句话之后是不是所有的子元素都不可见了呢？其实并不是，相反，这句话会让该元素的框线扩展到包围它下面的所有浮动子元素。这样就消除了子元素浮动给父元素带来的影响。
对于width: 100%; 表面上看这句话说了相当于没说，而对大多数浏览器它确实是这样，但是对于IE6/7这两个怪胎，这句话会触发他们的haslayout隐藏属性，同样的还可以使用zoom: 1;之类的。想了解haslayout详细的自己去问度娘，这里就不多说了。
举报
0/150
提交
取消
