前端基础之清除浮动笔记

最新推荐文章于 2024-08-02 13:35:44 发布

L.WY.D

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量49

点赞数

分类专栏：笔记整理文章标签：前端 javascript css html css3

本文链接：https://blog.csdn.net/weixin_44746876/article/details/128701286

版权

笔记整理专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端基础之清除浮动

什么是浮动

浮动，即浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止。

在CSS中，我们可以通过设置 float 属性实现元素的浮动。

浮动的特点

当元素设置为左右浮动时，它会脱离文档流，因此设置浮动的元素不再占用空间。

浮动导致的问题

由于浮动不再占用空间，因此父元素的高度无法被撑开。

<!-- 设置浮动前 -->
<style>
   #main {
       width: 500px;
       background-color: skyblue;
   }
   .div1 {
       width: 200px;
       height: 200px;
       background-color: lightgreen;
   }
   .div2 {
       width: 200px;
       height: 200px;
       background-color: lightpink;
   }
</style>
<body>
    <div id="main">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

<!-- 设置浮动后 -->
<style>
   #main {
       width: 500px;
       background-color: skyblue;
   }
   .div1 {
       width: 200px;
       height: 200px;
       background-color: lightgreen;
       float: left;
   }
   .div2 {
       width: 200px;
       height: 200px;
       background-color: lightpink;
       float: left;
   }
</style>
<body>
    <div id="main">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

在这里插入图片描述
2. 文本框内容围绕在浮动元素周围

<style>
   #main {
       width: 500px;
       background-color: skyblue;
   }
   .div1 {
       width: 200px;
       height: 200px;
       background-color: lightgreen;
       float: left;
   }
   .div2 {
       width: 200px;
       height: 200px;
       background-color: lightpink;
       float: left;
   }
</style>
<body>
    <div id="main">
        <div class="div1"></div>
        <div class="div2"></div>
        <p>这是一段文字。float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕
        在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是
        何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。</p>
    </div>
</body>

在这里插入图片描述

清除浮动的常用方法

设置父类元素高度

<style>
   /* 
       优点：简单
       缺点：需了解父类元素的高度
   */
   #main {
       width: 500px;
       background-color: skyblue;
       height: 300px;
   }
</style>

在这里插入图片描述

设置父元素浮动

<style>
   /* 
     优点：代码少
     缺点：影响后续元素
   */
   #main {
       width: 500px;
       background-color: skyblue;
       float: left;
   }
</style>

在这里插入图片描述

父元素 overflow 属性设置为 hidden、scroll 或者 auto

<style>
   /* 
       优点：代码少
       缺点：溢出元素将被隐藏
   */
   #main {
       width: 500px;
       background-color: skyblue;
       overflow: hidden;
   }
</style>

在这里插入图片描述

<style>
   /* 
       优点：代码少
       缺点：溢出元素将被隐藏
   */
   #main {
       width: 500px;
       background-color: skyblue;
       overflow: scroll;
   }
</style>

在这里插入图片描述

<style>
   /* 
       优点：代码少
       缺点：溢出元素将被隐藏
   */
   #main {
       width: 500px;
       background-color: skyblue;
       overflow: auto;
   }
</style>

在这里插入图片描述

额外标签法（使用 clear: both 清除浮动）

<style>
   /* 
       优点：通俗易懂
       缺点：创建了许多无意义的标签
   */
   #main {
       width: 500px;
       background-color: skyblue;
   }
   .clear {
       clear: both;
   }
</style>
<body>
    <div id="main">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="clear"></div>
    </div>
</body>

在这里插入图片描述

<style>
   #main {
       width: 500px;
       background-color: skyblue;
   }
   p {
       clear: both;
   }
</style>
<body>
    <div id="main">
        <div class="div1"></div>
        <div class="div2"></div>
        <p>这是一段文字。float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕
            在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是
            何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。</p>
    </div>
</body>

在这里插入图片描述

使用伪类元素清除浮动

<!-- 单伪类 -->
<style>
   /* 
       优点：不破坏文档结构，且无副作用
       缺点：代码量大
   */
   #main {
       width: 500px;
       background-color: skyblue;
   }
   .clearfix::after {
       content: "";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
</style>
<body>
    <div id="main" class="clearfix">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

在这里插入图片描述

<!-- 多伪类 -->
<style>
   /* 
       优点：不破坏文档结构，且无副作用
       缺点：代码量大
   */
   #main {
       width: 500px;
       background-color: skyblue;
   }
   .clearfix::before,
   .clearfix::after {
       content: "";
       display: table;
   }
   .clearfix::after {
       clear: both;
   }
</style>
<body>
    <div id="main" class="clearfix">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>