清除浮动的两种方式

「爱情、让人受尽委屈。」 2022-05-17 00:17 157阅读 0赞

<div class="container">
        <div>sibling</div>
        <div>sibling</div>
    </div>

.container{
    	background-color: red;
    }
    .container div{
    	background-color: yellow;
    	float: left;
    	margin: 10px;
    }

![70][]

当把div设置为浮动后,由于div脱离了文档流,父类无法撑起高度,所以未能显示背景色.以下提供两种解决浮动的方法:

一、在父元素添加clearfix类

<div class="container clearfix">
        <div>sibling</div>
        <div>sibling</div>
    </div>

.container{
    	background-color: red;
    }
    .container div{
    	background-color: yellow;
    	float: left;
    	margin: 10px;
    }
    .clearfix:after{
        display: block;
        content:'';
        clear: both;
        height:0;
    }

![70 1][]

二、在父元素添加overflow: hidden属性

<div class="container">
        <div>sibling</div>
        <div>sibling</div>
    </div>

.container{
    	background-color: red;
    	overflow: hidden;
    }
    .container div{
    	background-color: yellow;
    	float: left;
    	margin: 10px;
    }

![70 1][]

[70]: /images/20220517/fe950913bc994d87adda59bd7f9c07f4.png
[70 1]: /images/20220517/773907eaa1624474b20f82fb11748ffb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关清除浮动的4种方式

清除浮动的4种方式为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题如下: 给父盒子设置一个boder，内

柔光的暖阳◎/ 2022年12月26日 00:53/ 0 赞/ 205 阅读

相关 CSS 清除浮动的几种方式

CSS清楚浮动的几种方式：双伪元素（推荐）伪元素（不推荐）给父级添加 overflow:hiddle （不推荐）给后面浮动的元素添加一个空的 div

约定不等于承诺〃/ 2022年12月21日 13:57/ 0 赞/ 185 阅读

相关清除浮动的三种方法

CSS清除浮动的方法有哪些呢？经常性地会使用到float，很多邪门的事儿都有可能是浮动在作怪，清除浮动是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良

深碍√TFBOYSˉ_/ 2022年09月23日 08:54/ 0 赞/ 181 阅读

相关清除浮动的几种方式

清除浮动的几种方式今天碰到了一个浮动导致元素没有高度的问题，网上搜了以下，有片文章写的比较好，拿过来自己在补充以下。不算纯粹原创，文末注明了出处，以表示对作者的尊重。本

今天药忘吃喽~/ 2022年07月15日 19:16/ 0 赞/ 199 阅读

相关 CSS中清除浮动的方式

什么是浮动？使元素脱离文档流（标准流），按照指定方式发生移动，遇到父级边界或者相邻的浮动元素就停下来的一种现象。 float:left|right|inherit|ini

小咪咪/ 2022年06月12日 03:59/ 0 赞/ 181 阅读

相关 CSS清除浮动的几种方式

浮动会脱离文档流，如果不清楚浮动，会对周围的元素造成影响。当元素浮动时，它将不再处于普通的文档流中，不占据空间。 `html和css代码` <div clas

港控/mmm°/ 2022年06月11日 03:42/ 0 赞/ 208 阅读

相关 CSS清除浮动的几种方式

1.为父元素添加overflow：hidden <div style="overflow:hidden"> <img src="images/search.j

傷城~/ 2022年05月21日 09:34/ 0 赞/ 203 阅读

相关清除浮动的两种方式

<div class="container"> <div>sibling</div> <div>sibling</div> <

「爱情、让人受尽委屈。」/ 2022年05月17日 00:17/ 0 赞/ 158 阅读

相关清除浮动的方式

1. 给父级定义height .parent { background-color: red; } .float-left {

逃离我推掉我的手/ 2022年04月22日 10:44/ 0 赞/ 167 阅读

相关 css 浮动清除的几种方式

css浮动清除的几种方式 1.在父级div中定义伪类此方法的优点适用于大多数浏览器，对于初学者首先理解起来有些困难，通常使用这种方法时需要见一个公共的类来清除浮动

谁践踏了优雅/ 2022年02月22日 02:52/ 0 赞/ 265 阅读