web前端css清除浮动的方法总结

方法1：祖先加高法　　//不常用，不能适应页面的快速变化

　　如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。

　　只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

 

方法2：clear:both;　　//最简单，表示自己的内部元素，不受其他盒子的影响

　　clear:both的意思就是：不允许左侧和右侧有浮动对象。缺点：它所在的标签，margin属性失效。

 

方法3：隔墙法，内墙法　　//内墙法经常用，可以自适应高度，很重要特点

　　在两个浮动元素之间添加一个辅助元素div，然后设置这个辅助元素为clear:both; ，但是这个元素margin失效了，给它添加一个高度，这就是隔墙法。

　　一个div元素内只包括浮动元素，这个div是没有高度的，因为浮动的元素撑不起高度，所以给这个div元素添加一个非浮动辅助元素，那么这个div元素就可以自适应高度，这个非浮动辅助元素就是内墙。

　　一个父亲是不能被浮动的儿子撑出高度的。

 

方法4：overflow:hidden;

　　所有溢出边框的内容，都要隐藏掉。

　　我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果给这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。 并且,overflow:hidden;能够让margin生效。

 

转载于:https://www.cnblogs.com/yongfengnice/p/10753143.html