CSS清除浮动的3种方式

丘陵哈哈

已于 2024-03-30 10:46:27 修改

阅读量1.6k

点赞数 31

分类专栏：前端知识之CSS 文章标签： css 前端

于 2024-02-29 22:21:16 首次发布

本文链接：https://blog.csdn.net/m0_47013706/article/details/136381167

版权

前端知识之CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

1.问题引出：
2.解决：
3.扩展与总结：清除浮动的3种方式

1.问题引出：

此问题来源于书上的一段并不知道何种作用的CSS代码。

/*clearfix, clearfix是div的class属性值*/
.clearfix:after {
	content: "";
	dispplay: block;
	heigth: 0;
	clear: both;
	visibilty: hidden
}

2.解决：

参看了很多资料才知道这是CSS中用于清除浮动，子元素浮动会是该元素脱离文档流，会导致该元素的外部元素的布局随之发生塌陷。
解释如下:

.clearfix:after {   /*利用:after伪类元素在其元素后面添加元素内容*/
	content: "";	/*其内容为空，主要用于清除元素不展现出来*/
	dispplay: block;	/*保证添加的元素为块级元素才有效果*/
	heigth: 0;			
	clear: both;		/*关键代码：用于清除左右浮动*/
	visibilty: hidden；
}

3.扩展与总结：清除浮动的3种方式

3.1 使用BFC

BFC:(Block Formatting Context):格式化上下文，是web页面中css盒式模型的一种渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
具体使用如下代码所示：

<style>		/*内联样式*/
      /* BFC */
      .div1 {
        width: 200px;
        border: 1px solid #000;
        /*overflow: hidden;*/  /* 1. BFC ，使其成为BFC的其中一个条件*/
      }

      .div2 {
        float: right;
        width: 100px;
        height: 100px;
        background-color: green;
      }
    </style>
    <!--位于body种的元素，外部代码省略-->
    <div class="div1">
      <div class="div2"></div>
    </div>
    <p>一段文字</p>

下面分别是未加了overflow=hidden和加其属性的效果图
在这里插入图片描述

未加overflow=hidden效果图

在这里插入图片描述

加了overflow=hidden效果图

3.2在浮动元素后加一个块级元素如div

 <style>
   .div1 {
     width: 200px;
     border: 1px solid #000;
   }

   .div2 {
     float: right;
     width: 100px;
     height: 100px;
     background-color: green;
   }

   .clear {
     clear: both;
   }
 </style>
 
<body>
 <div class="div1">
   <div class="div2"></div>
   <div class="clear"></div> <!-- 后加的块级元素用于解决浮动问题-->
 </div>
 <p>一段文字</p>
</body>

3.3 使用:after伪类元素

本质上也是同第二种方式在其子元素后部加了一个块级元素。
note：.clearfix需要加在父元素中而不是子元素中。

 <style>
      .div1 {
        width: 200px;
        border: 1px solid #000;
      }

      .div2 {
        float: right;
        width: 100px;
        height: 100px;
        background-color: green;
      }

      /* 3. clearfix */
      .clearfix::after {
        content: '';
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="div1 clearfix">
      <div class="div2"></div>
    </div>
    <p>一段文字</p>
  </body>

如过感觉不够直观可之间观看视频版总结。点击此处

丘陵哈哈

关注

31
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
CSS清除浮动的3种方式

BFC:(Block Formatting Context):格式化上下文，是web页面中css盒式模型的一种渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。具体使用如下代码所示：< style > /*内联样式*/ /* BFC */ .div1 {*/ /* 1. BFC ，使其成为BFC的其中一个条件*/ } .div2 {
复制链接

扫一扫

专栏目录