div+css浮动的解决方法

发布时间:2020-06-30 15:57:08 作者:微宇宙
来源:网络 阅读:613

  已知一个大的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实现了。


推荐阅读:
  1. float浮动
  2. 浮动路由

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css div

上一篇:Exchange 隐藏联系人在地址列表中显示

下一篇:python分解复数方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》