浮动：float，清除浮动的四种方法

最新推荐文章于 2024-08-03 22:09:54 发布

忘喧

最新推荐文章于 2024-08-03 22:09:54 发布

阅读量2.1k

点赞数 1

分类专栏： HTML/CSS 文章标签： html css html5 css3

本文链接：https://blog.csdn.net/XiaoYige_97/article/details/107720093

版权

HTML/CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浮动的特性：

浮动的主要作用是：让多个块级元素（display: block）在同一行显示。
添加浮动的元素，脱离了标准文档流，不占位置，会影响标准流，后面的元素会向上移动，钻到浮动元素的下面。
浮动只有左右：float: left right none
添加浮动元素，进行了隐式转换变成了“行内块元素”，其实display虽然还是block /inline,但是添加了浮动的元素已经有了行内块元素的特性（inline-block）,可以设置宽和高

浮动的应用：

让多个块级元素在同行显示

<style>
        .red{
          
            border: 1px solid black;  /*添加边框*/
            float:left; /*添加向左的浮动*/
            margin-left: -1px;  /*向左移动 1 像素*/
            width: 100px; /*设置宽 高*/
            height: 100px;
            background-color:red;/*背景颜色*/
        }
        .green{
            width: 100px; /*设置宽 高*/
            height: 100px;
            float:right; /*添加向右的浮动*/
            background-color: green; /*背景颜色*/
            border: 1px solid black;  /*添加边框*/
        }
</style>

<body>
    <div class="red"></div>
    <div class="red"></div>
    <div class="green"></div>
</body>

布局：

<style>
        .row1,.row2{/*第一行和第二行*/
            height: 202px; 
            width: 404px;
            margin:auto; /*水平居中*/
        }
        .father {/*第一行和第二行里面的 4 个大盒子*/
            width: 200px;
            height: 200px;
            background-color:rgba(0,0, 0,0.5 );
            border:1px solid black;
            float: left;/*左浮动*/
        }
       .father div{ /*4个大盒子里面的小盒子*/
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        .father .son1{/*(0.0)*/
                float:right;/*右浮动*/
                margin-top: 100px;/*上外边距100px*/
          } 
        .father .son2{/*(0.1)*/
             float:left;/*左浮动*/
             margin-top: 100px;/*上外边距100px*/
         }
        .father .son3{/*(1.0)*/
            float: right;/*右浮动*/
        } 
    </style>
</head>

<body>
    <div class="row1"> <!--第一行-->
        <div class="father">
            <div class="son1">（0.0）</div>
        </div>
        <div class="father"> 
            <div class="son2">（0.1）</div>
        </div>
    </div>
    
    <div class="row2"><!--第二行-->
        <div class="father">
            <div class="son3">（1.0）</div>
        </div>
        <div class="father"> 
            <div class="son4">（1.2）</div>
        </div>
    </div>
</body>

<body>
    <div class="row1"> <!--第一行-->
        <div class="father">
            <div class="son1"></div>
        </div>
        <div class="father"> 
            <div class="son2"></div>
        </div>
    </div>
    
    <div class="row2"><!--第二行-->
        <div class="father">
            <div class="son3"></div>
        </div>
        <div class="father"> 
            <div class="son4"></div>
        </div>
    </div>
</body>

浮动的影响：

添加浮动的元素，会影响其他元素，元素浮动了，不占位置，后面的元素会自动补上。

<style>
        .left{
            width: 100px;
            height: 50px;
            float: left;
            background-color:slategray;
            border:1px solid black;
        }

        .right{
            width: 300px;
            height: 50px;
            float: left;
            background-color: cadetblue;
            border:1px solid black;
        }
      
        .none{
            width: 450px;
            height: 300px;
            background-color: coral;
        }
    </style>
</head>

<body>
    <div class="left">添加了浮动</div>
    <div class="right">添加了浮动</div>
    <div class="none">没有添加浮动</div>
</body>

清除浮动的影响：

当我们需要使用浮动而又不想因为浮动影响后面的标准流元素时，可以用一些手段来清除浮动的影响，并不需要后面的元素向上对齐，而是想要浮动的元素，虽然浮动了，离开了，但是以前的祖屋还是希望保留。

方法一：可以给浮动的父级元素设置高度来占位，这样后面的元素就不会向上补齐。一定要给父级元素手动设置高度，因为父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。
```
.father {
     height: 52px;
 }

<body>
    <div class="father">
        <div class="left">添加了浮动</div>
        <div class="right">添加了浮动</div>
    </div>
    <div class="none">没有添加浮动</div>
</body>
```
方法二：但是有时候，我们不确定父级元素要需要给多大，可以在浮动元素的后面添加一个元素，并添加一个clear:both 的属性来清除浮动。这样不需要给父级元素设置高度，浮动的元素会自动撑开一行的高度，并且后面的元素不会占用浮动元素的祖屋。
```
<body>
    <div class="left">添加了浮动</div>
    <div class="right">添加了浮动</div>
    <div style="clear:both"></div>
    <div class="none">没有添加浮动</div>
</body>
```

利用 overflow: hidden/auto清除浮动。子元素可以撑开父级的高度

<style>
       .father {
            overflow: hidden;      /*清除浮动*/
             /*overflow: auto;     清除浮动*/
            /* overflow: scroll;    清除浮动，但是有滚动条*/
            /* overflow: visible;  不可以清除浮动*/

        }

        .left {
            width: 100px;
            height: 50px;
            float: left;
            background-color: slategray;
            border: 1px solid black;
        }

        .right {
            width: 300px;
            height: 50px;
            float: left;
            background-color: cadetblue;
            border: 1px solid black;
        }

        .none {
            width: 450px;
            height: 300px;
            background-color: coral;
        }
</style>


<body>
    <div class="father">
        <div class="left">添加了浮动</div>
        <div class="right">添加了浮动</div>
    </div>
    <div class="none">没有添加浮动</div>
</body>

利用伪元素清除浮动，给父级添加伪元素。

<style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {/*兼容低版本IE浏览器*/
            *zoom: 1;
        }
        
        .left {
            width: 100px;
            height: 60px;
            float: left;
            background-color: slategray;
            border: 1px solid black;
        }

        .right {
            width: 300px;
            height: 50px;
            float: left;
            background-color: cadetblue;
            border: 1px solid black;
        }

        .none {
            width: 450px;
            height: 300px;
            background-color: coral;
        }
</style>

<body>
    <div class="father clearfix">
        <div class="left">添加了浮动</div>
        <div class="right">添加了浮动</div>
    </div>
    <div class="none">没有添加浮动</div>
</body>

利用双伪元素清除浮动,给父级添加伪元素。

 <style>
        .clearfix {/*兼容低版本的IE浏览器*/
            zoom: 1
        }

        .clearfix:after,
        .clearfix:before {
            content: " ";
            display: table
        }

        .clearfix:after {
            clear: both;
            visibility: hidden;
        }


        .left {
            width: 100px;
            height: 60px;
            float: left;
            background-color: slategray;
            border: 1px solid black;
        }

        .right {
            width: 300px;
            height: 50px;
            float: left;
            background-color: cadetblue;
            border: 1px solid black;
        }

        .none {
            width: 450px;
            height: 300px;
            background-color: coral;
        }
    </style>

<body>
    <div class="father clearfix">
        <div class="left">添加了浮动</div>
        <div class="right">添加了浮动</div>
    </div>
    <div class="none">没有添加浮动</div>
</body>

忘喧

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
浮动：float，清除浮动的四种方法

浮动的特性：浮动的主要作用是：让多个块级元素（display:block）在同一行显示。添加浮动的元素，脱离了标准文档流，不占位置，会影响标准流，后面的元素会向上移动，钻到浮动元素的下面。浮动只有左右：float: left right none 添加浮动元素，进行了隐式转换变成了“行内块元素”，其实display虽然还是block /inline,但是添加了浮动的元素已经有了行内块元素的特性（inline-block）,可以设置宽和高浮动的应用：让多个块级元素在同...
复制链接

扫一扫

专栏目录