div+css浮动的解决方法-css教程-PHP中文网

首页

web前端

css教程

div+css浮动的解决方法

高洛峰

Mar 31, 2017 am 11:15 AM

css浮动

如何清楚浮动（一）

　　已知一个大的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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn