美文网首页
清除浮动的几种方法

清除浮动的几种方法

作者: 兔吒 | 来源:发表于2019-11-17 14:07 被阅读0次

清除浮动

盒子高度问题

  1. 在标准流中内容的高度可以撑起盒子的高度(父元素div被撑起来)


<style>
        div{
            background-color: red;
        }
        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }        
</style>    
<div>
    <p></p>
</div>
  1. 在浮动流中浮动元素内容的高不可以撑起盒子的高(父元素红色背景的div并没有被撑起来)


<style>
        div{
            background-color: red;
        }
        p{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }        
</style>    
<div>
    <p></p>
</div>

清除浮动方式⑴

给前面的父盒子添加高度——

在企业开发中能不写高度就不写高度, 所以这种方式 不推荐

【 添加高度前 】 【 添加高度后】
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
        /*这里*/
        height: 50px;
    }
    .box2{
        background-color: purple;
    }
    ul{
        list-style: none;
    }
    .ul01 li{
        background-color: blue;
    }
    .ul02 li{
        background-color: green;
    }
    ul li{
        float: left;
    }
</style>
<div class="box1">
    <ul class="ul01">
        <li>伊利丹</li>
        <li>瓦斯琪</li>
        <li>凯尔萨斯</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>安度因</li>
        <li>瓦莉拉</li>
        <li>拉希奥</li>
    </ul>
</div>

清除浮动方式⑵

利用clear:both;属性清除前面浮动元素对我的影响 ——

margin属性会失效, 所以这个方式也 不推荐

【 添加 clear:both; 前 】
【 添加 clear:both;后 及时css中已经设置margin 但未生效 】
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*这里*/
            clear: both;
            /*margin无效*/
            margin-top: 30px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>
<div class="box1">
   <ul class="ul01">
        <li>伊利丹</li>
        <li>瓦斯琪</li>
        <li>凯尔萨斯</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>安度因</li>
        <li>瓦莉拉</li>
        <li>拉希奥</li>
    </ul>
</div>

清除浮动方式⑶

在两个有浮动子元素的盒子之间添加一个额外的块级元素 (外墙法) ——
  • 在外墙法中可以通过设置额外标签的高度来实现margin效果;
  • 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以 不推荐
【 添加额外块级元素前 】
【 添加额外块级元素后 】

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
        .h20{
            /*利用额外块级元素实现margin*/
            height: 20px;
            background-color: deepskyblue;
        }
</style>    

<div class="box1">
   <ul class="ul01">
        <li>伊利丹</li>
        <li>瓦斯琪</li>
        <li>凯尔萨斯</li>
    </ul>
</div>
<!--这里-->
<div class="wall h20"></div>
<div class="box2">
    <ul class="ul02">
        <li>安度因</li>
        <li>瓦莉拉</li>
        <li>拉希奥</li>
    </ul>
</div>

清除浮动方式⑷

在前面一个盒子的最后添加一个额外的块级元素 (内墙法) ——
  • 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性;
  • 和外墙法一样需要添加很多无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦。所以依然 不推荐
【 添加额外块级元素前 】
【 添加额外块级元素后 】
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>伊利丹</li>
        <li>瓦斯琪</li>
        <li>凯尔萨斯</li>
    </ul>
    <!--这里-->
    <div class="wall"></div>
</div>

<div class="box2">
    <ul class="ul02">
        <li>安度因</li>
        <li>瓦莉拉</li>
        <li>拉希奥</li>
    </ul>
</div>

清除浮动方式⑸

给前面的盒子添加 overflow:hidden属性 ——

缺点是和定位结合在一起使用时会有冲突

  • overflow:hidden的作用是清除溢出盒子边框外的内容;
  • IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个zoom:1;
【 添加overflow:hidden;前 】
【 添加overflow:hidden;后 】
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*这里*/
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>伊利丹</li>
        <li>瓦斯琪</li>
        <li>凯尔萨斯</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>安度因</li>
        <li>瓦莉拉</li>
        <li>拉希奥</li>
    </ul>
</div>

清除浮动方式⑹

给前面的盒子添加伪元素来清除浮动(推荐用法) ——
  • 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素;
  • 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性。
【 添加伪元素前 】
【 添加伪元素后 】
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
        /*这里*/
        .clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>伊利丹</li>
        <li>瓦斯琪</li>
        <li>凯尔萨斯</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>安度因</li>
        <li>瓦莉拉</li>
        <li>拉希奥</li>
    </ul>
</div>

清除浮动方式⑺

给前面的盒子添加双伪元素来清除浮动(推荐用法) ——
  • 支持BFC的浏览器(IE8+,firefox,chrome,safari)通过创建新的BFC闭合浮动;
  • 不支持 BFC的浏览器 (IE5-7),通过触发 hasLayout 闭合浮动。
【 添加伪元素前 】
【 添加伪元素后 】
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
        /*这里*/
        .cf:before,.cf:after {
            content:"";
            display:table;
            /*重点是这一句*/
            clear:both;
        }
        .cf {
            zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>伊利丹</li>
        <li>瓦斯琪</li>
        <li>凯尔萨斯</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>安度因</li>
        <li>瓦莉拉</li>
        <li>拉希奥</li>
    </ul>
</div>

相关文章

  • 清除浮动的最佳方法

    清除浮动的几种方法,这里不一一列举 个人认为,使用伪类来清除浮动是最好的一种方法 1) display:block...

  • 清除浮动常用的几种解决方法

    关于清除浮动的几种解决方法 一、浮动产生原因 浮动的产生是因为使用了float:left或float:rig...

  • 清除浮动的几种方法

    清除浮动的目的: 解决高度塌陷。 方法 clear: both 1.0 clear: both 2.0 注意只能使...

  • 清除浮动的几种方法

    1.clear:both 2.overflow:hidden(原意是溢出隐藏) 3.给内容加高度

  • 清除浮动的几种方法

    1.给父级元素添加clearfix名,使用after伪类清除浮动 2.在浮动元素后添加一个元素 3.给浮动元素父级...

  • 清除浮动的几种方法

    父元素使用伪元素after(推荐) 给浮动元素后的同级块级元素设置样式 clear: both 缺点:需要添加无用...

  • 清除浮动的几种方法

    面试又被问到了清浮动啊,一下子没答全,了解的也不是很透彻。再来总结一下! 为什么要清除浮动 因为浮动会使当前标签脱...

  • 清除浮动的几种常用方法

    CSS中的浮动简单介绍 浮动是CSS中的一个属性float来实现的,通过设置属性值left、right来实现元素的...

  • 清除浮动的几种方法

    原文地址http://www.cnblogs.com/hx1992/p/3791587.html一、父级容器给死高...

  • 清除浮动的几种常用方法

    父元素自适应宽高度,子元素浮动导致高度塌陷 高度塌陷: 示例图: HTML: CSS: 第一种解决方案: 通过给父...

网友评论

      本文标题:清除浮动的几种方法

      本文链接:https://www.haomeiwen.com/subject/ondpictx.html