<head> <title>Clear float</title> <style> .container{ margin: 30px auto; width:600px; height: 300px; } .wrapper{ border:solid 3px #a33; } .main{ width: 100px; height: 100px; background-color: #060; margin: 10px; float: left; } </style> </head> <body> <div> <div> <div></div> <div></div> <div></div> </div> </div> </body>
希望的结果是：
但结果是：
父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，除了用传统的伪类方法。根据
计算BFC的高度时，浮动元素也参与计算
还可以使父容器形成BFC，来清除浮动，简单修改一下代码：
<div> //添加一个float属性,形成BFC <div>1</div> <div>2</div> <div>3</div> </div>
可以得到如下效果：
总结来说，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
以上就是浅谈由position属性引申的css进阶讨论的详细内容，更多关于由position属性引申的css进阶讨论的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: