div+css浮动的解决方法
- 高洛峰原创
- 2017-03-31 11:15:301692浏览
如何清楚浮动（一）
已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。
如果有一个大的div容器2664b5c137162ed32cb2c4b60e3a831f 16b28748ea4df4d9c2150843fecfba68 ，这个大的div包含了一个子div容器4cd6539b02a5cf52b7697d7aec70ae5416b28748ea4df4d9c2150843fecfba68，子div容器设置一个宽度、高度、背景色，不设置内、外边距以及浮动，此时子div容器默认居左，这时子div居左是浮动(float)继承浏览器的属性，不具有布局的作用。然后我们设置这个子div容器的浮动，让它居左float:left；我发现设置了浮动居左float:left，子div容器产生了浮动，子div容器离大div容器顶部有一定距离。
<body>
<div class="divcss5">
<div class="clear"></div>
<!--<div class="clear eft"></div>
<div class="clear ight"></div>-->
</div>
</body>浮动有margin属性
然后我margin-top:10px, 子div容器在原有的基础上向下移动了10px的距离，也就是说，浮动不会影响margin-top属性应有的偏移量，同理也不会影响margin-left、margin-right、margin-bottom属性应有的偏移量。
浮动没有top，left，right，bottom属性
然后，现在我删掉margin-top:10px;，给子div容器设置top:10px，发现纵坐标并没有发生偏移，也就是是说浮动并没有top属性。同理也就没有left、right、bottom属性。
那么，在什么情况下设置top、left、right、bottom的属性才能对浮动起作用呢？
浮动有top，left，right，bottom属性(条件设置相对位置position)
于是，我给子div容器加了相对位置position:relative，接着设置top:10px，突然发现子div容器向下偏移了10px。
继续在子div浮动的状态，给它设置position:relative;，接着给它设置margin-left:10px;，看到子div容器的位置水平向右发生了10px的偏移量，同理margin-top、margin-right、margin-bottom都会改变。
也就是说，当給子div容器设置浮动float:left，接着设置margin-left会起作用，设置top是没有作用。只有给子div容器设置相对位置position的时候，top才能在浮动的状态下起作用，那么是不是说left，top是在相对位置的时候，才能起作用呢？那么现在我们就做一个实验，我在子div容器里把float:left;position:relative;都删掉，不会有浮动，也不会有相对位置，然后写上top:10px;left:10px;相应的css代码如下.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;};，结果是子div容器根本没有在横、纵轴移动过位置，所以事实证明left、top是在设置了相对位置position的时候才起作用。margin就是不管你设置position与不设置position都会起作用。
继续上面的float浮动，如果现在给float设置inherit;继承浏览器的浮动属性，此时我们看子div是不浮动的，默认居左。同样的給子div设置浮动样式 none initial也不会有浮动作用。只有給子div容器设置了left和right的浮动，子div容器才会出现浮动状态。
如何清楚浮动（二）
下面，我们用一种其他的方法来清除浮动，HTML代码还是以上的代码，大容器的div的css代码：.divcss5{padding:10px 0;width: 100%; left: 50%;right: 50%;background: #007CB5;}，子div容器的css代码：.clear{width: 200px;background: #f2e;color:#030617;height: 20px;float:left;}，此时看到的是浮动的效果，子div容器浮在大容器上面，同样的原理，我还是用清除浮动clear:both；我们可以用css伪元素:after，下面就是一个很简单的css代码，给父容器写css伪类，代码：.divcss5:after{content: "1";clear: both;display: block;}，此时，我们看到的是，清除了大容器的浮动，并且在浏览器上能看到子div容器被包含在了大div容器内部。在浏览器上查看元素，可以看到after包含在了父容器内，所以，after相当于在给父容器内部加一个清楚浮动的div，只是少了一个div层，这个层被.divcss5:after实现了。
以上是div+css浮动的解决方法的详细内容。更多信息请关注PHP中文网其他相关文章！