首页 > 其他 > 详细

清除浮动

时间:2019-10-19 12:24:38      阅读:55      评论:0      收藏:0      [点我收藏+]
父元素没有设置高度,高度由内容撑起
<div class="father cle">
        <div class="box1">first</div>
        <div class="box2">second</div>
    </div>
  <div class="foot"></div>
 
 

father {
width: 400px;
border: 1px solid red;
}

.box1 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}

.box2 {
width: 100px;
height: 100px;
background-color: deepskyblue;
}

.foot {
width: 500px;
height: 200px;
background-color: cadetblue;
}

 

技术分享图片

当给子元素设置float:left时

技术分享图片

1.此时父元素的高度没有了,可以在父元素中添加内容(再添加一个div,给这个div设置clear:both)

<div class="father cle">
        <div class="box1">first</div>
        <div class="box2">second</div>
        <div class="box3">third</div>
    </div>
    <div class="foot"></div>
.father {
            width: 400px;
            border: 1px solid red;
        }
        
        .box1 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            float: left;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            float: left;
        }
        
        .foot {
            width: 500px;
            height: 200px;
            background-color: cadetblue;
        }
        
        .box3 {
            clear: both;
        }
技术分享图片

 

 2.再父元素中设置overflow:hidden

技术分享图片

 

 3.设置after伪类

<div class="father cle">
        <div class="box1">first</div>
        <div class="box2">second</div>
        
    </div>
    <div class="foot"></div>
 
 .cle:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .cle {
            *zoom: 1;
        }

 

 技术分享图片

 

 

4.使用after和before双伪类

 .cle:after,
        .cle:before {
            content: "";
            display: table
        }
        
        .cle:after {
            clear: both;
        }
        
        .cle {
            *zoom: 1;
        }
<div class="father cle">
        <div class="box1">first</div>
        <div class="box2">second</div>
        
    </div>
    <div class="foot"></div>
技术分享图片

清除浮动

原文:https://www.cnblogs.com/zhanghaifeng123/p/11703261.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!