欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

div+css浮动的解决方法

程序员文章站 2022-03-16 19:10:57
...
如何清楚浮动（一）

　　已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。

　　如果有一个大的div容器<div class="divcss5"> </div> ，这个大的div包含了一个子div容器<div class="clear"></div>，子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浮动的解决方法的详细内容，更多请关注其它相关文章！

相关标签： css 浮动

上一篇： java相对php的优势有哪些

下一篇： CSS3做出条纹大背景

推荐阅读