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