浮动（会脱离文档流）、如何设置BFC环境的5种办法

最新推荐文章于 2024-03-23 00:06:53 发布

温婉婉

最新推荐文章于 2024-03-23 00:06:53 发布

阅读量272

点赞数

本文链接：https://blog.csdn.net/weixin_48796690/article/details/127228664

版权

HTML 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

CSS3

16 篇文章 0 订阅

订阅专栏

div

16 篇文章 0 订阅

订阅专栏

浮动（float:left 和float:right ）以及BFC环境

1、BFC环境

BFC的意思是：块级格式化上下文。BFC是一个独立的布局环境，那你可以把它理解为一个特殊容器，在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境里面的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响，也不会影响到BFC环境之外的东西

2、注意：

元素发生浮动后，就会对该元素后面的相邻元素造成影响，所以，为了不对该元素后面的相邻元素造成影响，需要对发生浮动的元素，营造一个BFC环境。变成BFC环境的方法有5种。

代码一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>body div:nth-of-type(1)</title>
</head>
<style>
   div{
    width: 100px;
    height: 100px;
   }
   /* 被body包含的所有的div中,且 什么样的div呢排第1个的div */
   body div:nth-of-type(1){
    background-color: red;
    float: left;
   }
    /* 被body包含的所有的div中,且 什么样的div呢排第2个的div */
   body div:nth-of-type(2){
    background-color: blue;
    float: left;
   }
   body div:nth-of-type(3){
    background-color: green;
    float: left;
   }



   body div:nth-of-type(4){
    background-color: red;
    float: right;
   }body div:nth-of-type(5){
    background-color: blue;
    float: right;
   }body div:nth-of-type(6){
    background-color: green;
    float: right;
   }
 
</style>
<body>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
</body>
</html>

代码一的效果图：
在这里插入图片描述

代码二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>  

    ol li{
        border: 1px red solid;
        list-style-type: none;
        float: left;
        /* 
        当ol内部的元素浮动后，会影响ol之后的相邻元素，为了使ol的相邻元素不受影响，
        我们可以将ol营造成BFC环境,使ol变成一个块级元素，这样就不会影响到ol的相邻元素了
        */
    }

     ol {
        /* 把ol变成BFC环境的方法：以下四种 */
        /* 方法一： */
        display: flow-root;
        /* 方法二： */
        /* overflow: hidden; */
        /* 方法三：直接给ol设置一个高度，在这个高度内，任你ol怎么造，都不会影响到ol后面的元素*/
        /* height: 300px; */
        /* 方法四（不太不常用）:在ol后面的元素前，插队加一个空div，然后在这个空div里面设置一个样式style="clear:both"*/
    }


   
</style>
<body>
    <ol>
        <li>因为疫情aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li>我们不能随意乱跑eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</li>
        <li>这样也罢cccccccccccccccccccccccccccccccccccccccccccccccccccccc</li>
        <li>躺在家里也省钱ddddddddddddddddddddddddddddddddd</li>
    </ol>
    
    <h1>我是ol后面的元素哦!</h1>
    
    
</body>
</html>

代码二的效果图： 在这里插入图片描述
代码三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>  

    ol li{
        border: 1px red solid;
        list-style-type: none;
        float: left;
        /* 
        当ol内部的元素浮动后，会影响ol之后的相邻元素，为了使ol的相邻元素不受影响，
        我们可以将ol营造成BFC环境,使ol变成一个块级元素，这样就不会影响到ol的相邻元素了
        */
    }

     ol {
        /* 把ol变成BFC环境的方法五：*/
        /* 方法四（不太不常用）:在ol后面的元素前，插队加一个空div，然后在这个空div里面设置一个样式style="clear:both"*/
        /* 方法五：把方法四改进一下，在样式中，使用方法四的思想，具体操作如下： */
    }

    /* after是"之后"的意思，这里使用伪类选择器::after表示在ol内部的最后面，动态添加一个内容,内容为空，display方式为块级元素block，clear清除浮动 */
    ol::after{
        content: '';
        display: block;
        clear: both;
    }

</style>
<body>
    <ol>
        <li>因为疫情aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li>我们不能随意乱跑eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</li>
        <li>这样也罢cccccccccccccccccccccccccccccccccccccccccccccccccccccc</li>
        <li>躺在家里也省钱ddddddddddddddddddddddddddddddddd</li>
    </ol>
    
    <h1>我是ol后面的元素哦!</h1>
    
    
</body>
</html>

代码三的效果图：
在这里插入图片描述
代码四：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习    ::before或者::after</title>
</head>
<style>
label::before{
    content: '*';
    color: red;
    font-size: 10px;
    clear:both;
}
.aa::before{ 
    content: '*';
    color: blue;
    font-size: 10px;
    clear:both;
}
</style>
<body>
    <label for="">用户名</label>
    <label for="">密码</label>
    <label for="">vvvvv</label>

<hr>

    <label for="" class="aa">用户呼呼呼</label>
    <label for="" class="aa">密码马马马马</label>
    <label for="">kkkkkkk</label>
</body>
</html>