likes
comments
collection
share

【小白入门】浮动、清除浮动与BFC

作者站长头像
站长
· 阅读数 15

前言

什么是浮动：首先浮动就是让盒子或者元素脱离正常的标准流控制，你可以想象一下，元素本来在一个位置，加一个浮动它就会像云一样飘浮起来。进而移动到指定的位置。需要记住的是，如果元素或者盒子添加了浮动就不再占有本来的位置了。

在之前我们认识的都是css中按照正常流去布局的，正常流就是按照正常的逻辑从上到下，从左到右去布局，这次以及往后我们学习了浮动和定位之后你会发现，其实在日常的业务和工作当中按照正常的逻辑是行不通的，所以才会出现了浮动和定位等布局方式。接下来我们介绍下浮动的一些特性。

一、浮动特性

1、文字环绕

给类名为pic的盒子加左浮动，文字会环绕着该盒子。

<style>
        *{
            padding: 0;
            margin: 0;
        }
       .pic{
            width: 200px;
            height: 200px;
            float: left;
        }
        .pic img{
            width: 100%;
            height: 100%;
        }          
</style>
<body>
    <div class="pic">
        <img src="./img/01.jpg" alt="">
    </div>
    <div class="text">
        建国一行先后来到冯卯镇青石村、陈山村、独古城村和冯卯村进行调研。调研期间，郭建国听取了孙本晓、朱代国、张召兵和刘运正四位第一书记的工作汇报，询问了四位第一书记工作学习和生活起居等情况。郭建国一行实地调研了帮包村基层党建成果、基础设施建设、
        产业项目培育和未来发展规划，对第一书记驻村以来结合村庄特点因地制宜开展的帮
        建国一行先后来到冯卯镇青石村、陈山村、独古城村和冯卯村进行调研。调研期间，郭建国听取了孙本晓、朱代国、张召兵和刘运正四位第一书记的工作汇报，询问了四位第一书记工作学习和生活起居等情况。郭建国一行实地调研了帮包村基层党建成果、基础设施建设、产业项目培育
        和未来发展规划，对第一书记驻村以来结合村庄特点因地制宜开展的帮
        建国一行先后来到冯卯镇青石村、陈山村、独古城村和冯卯村进行调研。调研期间，郭建国听取了孙本晓、朱代国、张召兵和刘运正四位第一书记的工作汇报，询问了四位第一书记工作学习和生活起居等情况。郭建国一行实地调研了帮包村基层党建成果、基础设施建设、产业项目培育
    </div>
</body>

页面效果：

【小白入门】浮动、清除浮动与BFC

2、可以让块级元素同行显示

<style>
        *{
            margin: 0;
            padding: 0;
        }
        /* body{
            font-size: 0;
            display:flex;
        } */
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            float: left;
            /* display: inline-block;
            font-size: 20px; */
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: blue;
        }
        .item3{
            background-color: yellow;
        }
        
    </style>
    <body>
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <!-- <p>hello world</p> -->
</body>

页面效果：

【小白入门】浮动、清除浮动与BFC

3、元素会脱离文档流,父容器高度塌陷

继续以上示例， 页面效果：

父容器body的高度为0

【小白入门】浮动、清除浮动与BFC

在类名为item3的盒子后面加了一段文字后

<body>
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    
    <p>hello world</p>
</body>

父容器body的高度和文字高度一样

【小白入门】浮动、清除浮动与BFC

可以看到浮动的盒子脱离了文档流，父容器高度塌陷。

4、让行内元素可以设置宽高

例如：span为行内元素，不能设置宽高，加了浮动后可以直接设置宽高了

<style>
        .box{
            width: 100vw;
            height: 200px;
            background-color: black;
            /* display: flex;
            justify-content: center; */
        }
        span{
            /* display: block; */
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
            /* margin-left: 30px; */
            border: 1px solid red;
           
        }
    </style>
    
    <body>
    <div class="box">
        <span>1</span>
        <span>2</span>
    </div>
</body>

页面效果：

【小白入门】浮动、清除浮动与BFC

5、浮动元素可以设置margin,但是不能设置margin:0 auto;

继续上例，例如：给span标签加了左外边距

span{
            /* display: block; */
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
            margin-left: 30px;
            border: 1px solid red;
           
        }

页面效果：

【小白入门】浮动、清除浮动与BFC

但是给span设置margin:0 auto后没有任何效果

span{
            /* display: block; */
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
            /* margin-left: 30px; */
            margin: 0 auto;
            border: 1px solid red;
           
        }

页面效果：

【小白入门】浮动、清除浮动与BFC

二、清除浮动

1.直接设置父容器的高度（不推荐：带来不好的用户体验，后期维护困难）

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style:none;
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: red;
            float: left;
        }
        .content{
            width: 200px;
            height: 100px;
            background-color: blue;
           
        }
 </style>
 <body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!-- <div class="clear"></div> -->
        </ul>
        <div class="content">content</div>
        <div class="content">content</div>
    </div>
</body>

页面效果：

ul中的li盒子浮动后，由于父容器ul高度为0，下面的content上来了

【小白入门】浮动、清除浮动与BFC

给ul设置高度后： ul{ height: 120px; }， 2个蓝色content盒子就下来了

页面效果：

【小白入门】浮动、清除浮动与BFC

2.增加子容器，在子容器身上做清除浮动（不推荐：添加无意义标签，结构化比较差）

继续上面例子，在第三个li标签后增加一个div盒子,并添加清除浮动属性，clear:both

若浮动盒子的浮动为 float:left，则清除浮动可以写clear:both|left, 若浮动盒子的浮动为 float:right，则清除浮动可以写clear:both|right

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style:none;
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: red;
            float: left;
        }
        .content{
            width: 200px;
            height: 100px;
            background-color: blue;
           
        }  
         .clear{
            clear: both;
        }  
    </style>
  <body>    
  <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <div class="clear"></div>
        </ul>
        <div class="content">content</div>
        <div class="content">content</div>
    </div> 
   </body>

页面效果：

【小白入门】浮动、清除浮动与BFC

3.伪元素 xx::after{ content: ''; display: block; clear:both;}（最佳，常用）

给施加了浮动效果的li盒子的父元素ul后，使用伪元素清除浮动，注意：若使用伪元素必须包含content:''，''内可以不写内容。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style:none;
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: red;
            float: left;
        }
        .content{
            width: 200px;
            height: 100px;
            background-color: blue;
           
        }
         ul::after{
            content: '';
            display: block;
            clear:both;
        }
 </style> 
 <body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!-- <div class="clear"></div> -->
        </ul>
        <div class="content">content</div>
        <div class="content">content</div>
    </div>
</body>

页面效果：

【小白入门】浮动、清除浮动与BFC

4.给下面受影响的容器添加clear:both;（不常用）

 .content{
            clear: both;
        }
      
 <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!-- <div class="clear"></div> -->
        </ul>
        <div class="content">content</div>
        <div class="content">content</div>
    </div>

页面效果：

【小白入门】浮动、清除浮动与BFC

5.借助BFC容器的特点，抵消掉浮动的负面影响（常用，但内容增多时不会自动换行导致内容被隐藏）

首先什么是BFC。

所谓BFC---Block formatting Context（块格式化上下文）,是css渲染的一部分，主要决定盒子的布局和浮动相互影响的一个区域。 那么，怎么创建BFC容器呢？有以下几种方法：

创建BFC容器的方法:

可以选择添加以下属性之一

1.浮动 (float:left|right)

2.overflow:auto|hidden|scroll|overlay

3.display:inline-block

4.网格布局(grid | inline-grid)

5.表格布局(table | table-cell | table-caption | inline-table)

6.弹性布局(flex | inline-flex)

7.定位 (absolute | fixed)

那么接下来利用BFC容器的特点实现清除浮动的负面影响吧， 例如，添加ul{ overflow: hidden; }，详细代码如下：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style:none;
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: red;
            float: left;
        }
        .content{
            width: 200px;
            height: 100px;
            background-color: blue;
           
        }
         ul{
           overflow: hidden;  /* auto */
            /* display: table-cell; */
            /* float: left; */
        }
        
    </style>
   <body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!-- <div class="clear"></div> -->
        </ul>
        <div class="content">content</div>
        <div class="content">content</div>
    </div>
</body>

实现效果：

【小白入门】浮动、清除浮动与BFC

再来看一个例子：

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        .con{
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: red;
            float: left;
        }
        .content{
            width: 200px;
            height: 100px;
            background-color: blue;
           
        } 
    </style>
    <body>
    <div class="box">
        <div class="con">1</div>
        <div class="con">2</div>
        <div class="content">content</div>
    </div>
</body>

实现效果：

【小白入门】浮动、清除浮动与BFC

可以看到父盒子box的高度与content盒子高度一样，并不是浮动盒子con的高度，同时也发现content盒子的内容content并没有和content盒子一起，原因是因为浮动盒子con的作用——浮动的文字环绕效果。 接下来给父盒子box添加 .box{ overflow: hidden; }实现BFC容器效果

实现效果：

【小白入门】浮动、清除浮动与BFC

此时父盒子box的高度与浮动盒子con的高度一样高

由此我们可以知道 BFC的特点：

  • BFC容器计算高度时，会将浮动元素的高度也计算在内；
  • 同时BFC也维护一个常规的文档流。

拓展：BFC容器的特点还有一个就是

  • 可以解决子容器和父容器 间 margin重叠的问题
  • 但是不能解决子容器与子容器之间margin重叠的问题

如图所示：最外层盒子外边距100px

【小白入门】浮动、清除浮动与BFC 
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        height: 500px;
        background: pink;
        margin-top: 100px; 
        /*overflow: hidden;*/
    }
    .top{
        height: 200px;
        background: blue;
        /* margin-top: 50px; */
    }
    .bottom{
        height: 100px;
        background: yellow;
    }
</style>
<body>
    <div class="box">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>

现在给蓝盒子增加50px的外边距.top{ height: 200px; background: blue; margin-top: 50px; }

【小白入门】浮动、清除浮动与BFC

可以看到父容器box的外边距和子容器的外边距重合了，解决办法就是给父容器添加overflow: hidden;

【小白入门】浮动、清除浮动与BFC

那么怎么解决子容器与子容器之间的margin重叠的问题

现给蓝盒子和黄盒子添加如下外边距

.top{
        height: 200px;
        background: blue;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .bottom{
        height: 100px;
        background: yellow;
        margin-top: 50px;
    }
【小白入门】浮动、清除浮动与BFC

子容器之间——蓝盒子和黄盒子margin重叠

解决办法：

可重新建一个bfc容器。当两个相邻块级元素分属于不同的BFC时，就可以阻止margin重叠

操作方法：

给其中子容器div外包一个div,然后通过触发外面的div的BFC,就可以阻止这两个子容器margin重叠。

.bo{
        overflow: hidden;
    }
    
<body>
    <div class="box">
        <div class="top"></div>
        <div class="bo">
        <div class="bottom"></div>
        </div>
    </div>
</body>

实现效果：

【小白入门】浮动、清除浮动与BFC

结束

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上了 文章可能有一些错误，欢迎评论指出，也欢迎一起讨论。