float清除浮动

最新推荐文章于 2021-11-17 21:55:31 发布

原创最新推荐文章于 2021-11-17 21:55:31 发布 · 335 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了float和inline-block在网页布局中的应用及它们带来的问题，包括如何解决inline-block元素间的多余间距以及清除浮动对页面布局的影响。介绍了多种解决方法，如使用clearfix技巧、调整字体大小、设置overflow等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

float(对块级与行内元素的影响)，如何清除浮动

影响： 浮动会使元素具有块级元素和行内元素的特点（即内联块的特点），让块元素在同一行显示。
内联块（inline-block）和浮动（float：left/right/none）（元素脱离文档流，按照浮动方向移动，遇到父级边界或者相邻浮动元素停住）但是无论哪种方式都需要做一些处理：去除inline-block的间隔和去除浮动。

去除inline-block的间隔
1. 去掉换行符（不推荐）；
2. 设置margin-left为负（不推荐）一般中间一个字符大小即一个em；
3. 设置字体大小（推荐）块中默认字体大小设为0。
去除浮动
1. overflow:hidden隐藏/scroll 滚动条/auto，hidden可以清除浮动但有可能隐藏有用的东西（不推荐）（BFC布局原理,这三个overflow的属性为触发BFC）；
2. 父元素直接设置高度（当子元素的高度超过父元素的话会造成布局塌陷）；
3. style=”clear:both;”也可以清除浮动但是会加入空标签（不推荐）；
4. clearfix的方法。

.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{*zoom:1}  /*（兼容低版本ie  触发haslayout）*/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dorui

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS-float浮动布局、float清除浮动与flex布局

weixin_44201223的博客

04-26

1790

float flex 清除浮动

学习float清除浮动

ChengNan的博客

06-01

154

为什么要清除浮动？我们在其他设备逛购物商城的时候，会看到有推荐商品，但是推荐的商品的数量不是固定的，有可能会增多也有可能会减少，我们希望商品能撑开商品展示页，高度随着商品的数量改变而适当改变，所以我们不能给商品展示页的高度写固定。我们给商品展示页里写入3个商品，但是我们没有给展示页高度，而里面的商品自动撑开了展示页，满足了我们的需求。 <style> .shop_page { width: 500px; border: 4px

参与评论您还未登录，请先登录后发表或查看评论

彻底理解浮动float CSS浮动详解清除浮动的方法

weixin_30919429的博客

08-12

154

我们把网页的常用的布局格式分为以下三种： 1.标准流。所谓的标准流就是，行内元素自己单独一行，而块级元素是上下显示的。以前我们学习的都是标准流。注意：标准流使我们网页布局中最稳定的一种结构 2.浮动流使我们学习的脱离标准流的第一种方式。会影响我们标准流的排列。所以，我们布局的时候，能用标准流做的，就不用浮动做。 ...

float 清除浮动

josiecici的博客

06-09

158

clearfix 最好的方法是使用clearfix属性，下面的代码适用到IE6。 .clearfix:after { clear: both; }

Float浮动及清除浮动

敏敏的博

11-17

1028

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、什么是浮动Float？二、为什么需要浮动？三、浮动的特性1.具有行内块元素的特性2.脱标四、浮动可能产生的影响1、后续标准流被覆盖2、父级盒子高度塌陷问题五、清除浮动1、额外标签法（隔墙法）2、父级添加 overflow 属性3、父级添加after伪元素4、父级添加双伪元素总结前言本篇文章总结了float可能对布局产生的影响及清除浮动的方法提示：以下是本篇文章正文内容，下面案例可供参考一、什么是浮动Float？

Float浮动与清除浮动

qq_41163670的博客

02-29

271

Float浮动浮动定义了元素在哪个方向浮动，不论被浮动的元素本身是何种元素，浮动之后都会生成一个块级框。浮动主要是为了让页面中的元素在水平方向依次横向排列，在页面布局中非常有用。相关属性值值描述 left 左浮动 right 右浮动 none 默认，元素不浮动 inherit 从父元素继承float属性的值没有浮动之前，所有的元素在文档的...

CSS清除浮动float的三种方法小结

09-24

为了解决这个问题，我们有三种主要的清除浮动（clear float）方法。 1. 添加新元素并应用`clear: both;` 这种方法是在浮动元素之后添加一个额外的空元素，比如`<div class="clear"></div>`，然后在CSS中设置`.clear...

清除浮动(float)的影响介绍

09-24

总结一下，清除浮动的影响主要涉及如何处理浮动元素导致的父元素塌陷问题。通过使用`overflow:hidden`创建BFC或者使用`clear`属性，我们可以有效地恢复正常的布局，并确保父元素能够正确包裹住其内部的浮动元素。在...

关于CSS Hack与float闭合的CSS技巧清除浮动代码

09-25

### float闭合（清除浮动）当元素设置了 `float` 属性后，会导致其脱离正常的文档流，这可能会引起布局问题，如父元素高度塌陷等。因此，清除浮动是非常重要的步骤。 #### 方法：clearfix 技术 clearfix 是一种...

float布局, 清除浮动

让世界更美好！

07-23

459

float的bug 我们时长使用float进行布局, 但是在使用float布局的同时, 常出现父级元素包不住子元素的情况. 比如: <div class="parent"> <div class="child"></div> </div> css设置如下: .parent { border: 1px solid red; } .ch...

[CSS]CSS浮动float详解（三）：清除浮动方案

Feathers的个人笔记

12-16

1394

阅读前请看[CSS]CSS浮动float详解（二）：使用floatfloat虽然带来了很多好处，但是也带来了一些问题。问题：<!DOCTYPE html> <html> <head> <title>测试</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0

页面布局——float之清除浮动

樊云飞

04-18

347

长期以来，很多人都以为清浮动的含义就是清除浮动，实际上清浮动是指清除浮动造成的影响，即给子元素使用float 会造成父级元素高度塌陷，为此需要清浮动。浮动破坏了 line-box 才会浮动；本质：清除浮动的影响，解决父级元素塌陷；解决方法：给父级元素设置高度（局限性：在子元素高度不固定的情况下无法解决，扩展性不好）； clear:both; .clear{ *zoom:1;//缩放，...

Float的清除

BoomJNTM的博客

06-27

442

清除浮动今天学习了下清除浮动：第一种：直接在div中clear:both;//比如我想div4有清除浮动的效果直接对div4进行样式设置clear:both; <div id="div1"> <div id="div2"></div> <div id="div3"></div> <div id="...

float属性及清除浮动

miaomiao_1024的博客

11-07

523

float属性及清除浮动 float属性 float 属性定义元素在哪个方向浮动。目前所有主流浏览器都支持 float 属性。属性值值描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。 1.浮动对自己的影响块级元素/行内元素设...

清除float带来的浮动流

BeMount

03-06

770

以前float是用于排版写报纸那样的格式的，但随着前端工程师精益求精的精神，开发出很多新的玩法，当然也出现很多的坑，这里就来解决一下如何清除浮动流的问题。。

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

XiaoYi

07-31

2322

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

float：left清除浮动

最新发布

04-16

<think>嗯，用户想知道如何在CSS中清除float:left导致的浮动问题，以及相关的清除浮动方法。首先，我需要回忆一下关于CSS浮动的知识。根据引用[1]到[5]，清除浮动的方法主要有几种，比如使用clear属性、伪元素清除法、父元素设置overflow，还有空div方法等等。用户的问题可能是在使用float:left布局时，父元素无法正确包裹浮动子元素，导致布局错乱，比如高度塌陷。这时候需要清除浮动。根据引用[4]，浮动元素会脱离文档流，父元素不计算其高度，所以必须清除浮动。首先，我应该列举不同的清除浮动方法。比如，clear属性可以直接在元素上使用，比如clear:both，这样后面的元素就不会受到前面浮动的影响。引用[2]中的例子就是在.box3上使用clear:left，这样它就不会被前面的左浮动元素顶上去。然后，伪元素清除法，也就是使用::after在父容器末尾添加内容，并设置clear:both。这种方法比较常用，比如引用[1]提到的第五种方法，或者引用[4]中提到的清除浮动的方式，这样父元素就能正确包含浮动子元素了。还有父元素设置overflow:hidden或auto，这会触发BFC，让父元素计算浮动子元素的高度。引用[4]可能提到这种方法，但需要确认具体引用内容。另外，空div法是在浮动元素后添加一个空的div，并设置clear:both，这也是传统方法，但可能不够语义化。需要确保每种方法的正确性和适用场景。比如，伪元素方法比较现代，推荐使用；而空div法则可能影响HTML结构。同时，要注意引用中的例子，比如引用[2]中的代码展示了clear:left的使用，引用[4]强调必须清除浮动，否则会影响后续布局。还需要注意，使用浮动后，父元素高度塌陷的问题，不同的清除方法如何解决这个问题。比如，伪元素法通过生成一个块级元素来清除，而overflow方法则通过BFC机制。需要解释这些原理，但保持简洁。总结下来，应该分点列出五种方法，并给出示例代码，如使用clear属性、伪元素、overflow、空div，以及父元素浮动。同时，根据引用内容正确标注引用来源，比如引用[1]提到五种清除方法，引用[2]和[4]提供了具体的代码示例。最后，生成相关问题，比如清除浮动的原理、BFC的作用、不同方法的优缺点，以及替代浮动的布局方式。这些相关问题可以帮助用户进一步学习。</think>### CSS浮动清除方法详解在CSS中使用$float: left$进行布局时，若未正确清除浮动，会导致父元素高度塌陷、后续元素布局错乱等问题[^4]。以下是5种常用清除浮动的方法： --- #### 1. **`clear`属性直接清除** 在浮动元素后的元素添加`clear: both`属性： ```css .box3 { clear: both; /* 清除所有方向的浮动影响 */ } ``` 示例中`.box3`通过`clear: left`避免被左浮动的`.box1`和`.box2`顶上去[^2]。 --- #### 2. **伪元素清除法（推荐）** 通过父元素的伪元素添加清除逻辑： ```css .parent::after { content: ""; display: block; clear: both; } ``` 此方法无需修改HTML结构，是最常用的清除方式[^1][^4]。 --- #### 3. **父元素设置`overflow`属性** 为父容器添加`overflow: hidden`或`overflow: auto`，触发BFC（块级格式化上下文）： ```css .parent { overflow: hidden; /* 强制父元素包含浮动子元素 */ } ``` 此方法通过BFC特性自动计算浮动元素高度[^4]。 --- #### 4. **空`div`清除法** 在浮动元素末尾插入空`<div>`并设置`clear: both`： ```html <div class="parent"> <div class="float-left"></div> <div class="clearfix"></div> </div> <style> .clearfix { clear: both; } </style> ``` 虽然有效，但增加了无意义的HTML标签[^1]。 --- #### 5. **父元素浮动** 若父元素也设置浮动，则会自动包含子元素： ```css .parent { float: left; /* 父元素自身浮动 */ width: 100%; } ``` 此方法可能导致父元素脱离文档流，需谨慎使用[^4]。 --- ### 核心原理浮动元素会脱离文档流，导致父元素无法计算其高度。清除浮动的本质是通过强制父元素包含浮动元素，恢复正常的布局流[^4][^5]。 ---