清除浮动的几种方式

今天药忘吃喽~ 2022-07-15 19:16 195阅读 0赞

# **清除浮动的几种方式** #

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

一般来说清除浮动有如下的几种方式

1.额外标签法  
这种办法，如果对代码有洁癖，那么不建议使用。

<style > .float{ float:left; } .floatFix{ clear:both; } </style>
    <div class = "wrap">
        <div class= "float"></div>
        <div class= "float"></div>
        <div class= "floatFix"></div>
    </div>

2.使用after元素法

<style > .float{ float:left; } .wrap:after{ content: ''; display: block; clear: both; } </style>
    <div class = "wrap">
        <div class= "float"></div>
        <div class= "float"></div>
    </div>

**注**  
伪类after，是在寄生元素后添加content内容，相当于添加了一个新的html标签。  
然后再content下方，添加content的相关样式属性。

3.利用overflow:hidden属性

<style > .float{ float:left; } .wrap{ overflow:hidden; } </style>
    <div class = "wrap">
        <div class= "float"></div>
        <div class= "float"></div>
    </div>

#### 以下方式不太推荐： ####

4.给父元素定高

5.父元素浮动

6.父元素处于绝对定位

[参考文章][Link 1]

[Link 1]: https://segmentfault.com/a/1190000003937063

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关清除浮动的几种方法

1. 浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中

柔情只为你懂/ 2022年11月12日 13:52/ 0 赞/ 175 阅读

相关清除浮动的几种方法

1.浮动元素下加空div 为了统一样式，我们新建一个样式选择器class命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”

迷南。/ 2022年08月05日 01:17/ 0 赞/ 189 阅读

相关清除浮动的几种方式

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

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

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

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

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

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

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

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

相关清除浮动的两种方式

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

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

相关清除浮动的几种方法

浮动产生负作用 1.背景颜色不能使用子元素float ，如果父元素设置了background，而父级不能被撑开，所以导致背景颜色不能显示 2.边框不能撑开如果父

心已赠人/ 2022年05月10日 01:36/ 0 赞/ 231 阅读

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

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

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

相关清除浮动的几种方法

标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，

女爷i/ 2021年11月11日 13:22/ 0 赞/ 329 阅读