父元素如果子元素都进行了浮动的话，父元素需要清除浮动，否则父元素高度会有问题

最新推荐文章于 2022-09-20 06:49:15 发布

原创最新推荐文章于 2022-09-20 06:49:15 发布 · 990 阅读

0 ·

CC 4.0 BY-SA版权

cyh的前端学习之路专栏收录该内容

40 篇文章

订阅专栏

本文深入探讨了CSS中clearfix属性的应用技巧，详细解释了如何通过:before和:after伪元素清除浮动，实现更优美的布局效果。这是一篇针对前端开发者，特别是CSS初学者的实用指南。

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

.clearfix:before,
.clearfix:after{
  content: " ";
  display: inline-block;
  height: 0;
  clear: both;
  visibility: hidden;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

锋芒神话霜

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS浮动八：float崩溃特性（主要是：浮动的子元素不能撑起非浮动的父元素。）

小枯林的博客

12-23

679

目录一：float崩溃 1：正常的情况，不会出现崩溃的情况（1）一个空白的div中，如果不进行任何尺寸的设定，并且div里面没有任何内容时，div是没有高度的：（2）当在div中添加内容时候：div中内容的高度就是div的高度；即div中的内容会把div给撑起来；（3.1）可以认为给div设置高度：div的宽度默认充满其所在父一级元素的宽度。（div默认的高度和宽度）（3.2）可以认为给div设置高度：div的宽度默认充满其所在父一级元素的宽度。（div默认的高度和宽度）（4）总.

CSS之父元素包含浮动子元素

shandamengcheng的博客

09-20

1289

CSS之父元素包含浮动子元素 #third { width: 500px; float: left; background: orange; height: 500px; } #forth { width: 400px; h...

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

子元素浮动 父元素不能自动调节高度的问题

06-19

261

我们知道，子元素浮动或者相对定位，元素都会脱离文档流。而父元素如果没有设置固定高度，在计算高度时，就不会计算浮动子元素所占的高度。但是，有时候我们需要父元素计算其所有子元素的的高度(包括浮动元素)来调整自己的宽高，以便调节自身的背景 border等，此时，只需要给父元素添加css属性： overflow：auto; zoom : 1; 父元素就会自动计算包括浮动子元素内所有子元素的高度...

浮动的清除（1、给浮动的元素的祖先元素加高度、 2、clear:both）

weixin_72303943的博客

07-06

295

浮动的清除（1、给浮动的元素的祖先元素加高度、 2、clear:both）

如果父级和子级都加了浮动会有什么现象？

x1037490413的博客

09-17

1009

在WEB前端当中，如果针对元素进行了浮动的设置，则该元素会脱离文档流而存在，会引起父级元素的塌陷，同时会对同一级别的元素造成布局上的影响。但是，当为父级元素也设置了浮动之后，父级元素也脱离文档流，父级元素和子级元素都属于浮动元素，此时，父级元素高度塌陷的问题反而会被解决（即：另一个元素的父级元素浮动，是针对该子级元素清浮动的一种方法），但是由于父级元素发生浮动，父级元素的兄弟

CSS——CSS浮动与清除浮动

流楚丶格念的博客

07-02

5142

文章目录浮动普通流(normal flow)浮动(float)什么是浮动？浮动详细内幕特性float 浮漏特现在就可以用float实现一些基本页面布局了链接清除浮动为什么要清除浮动清除浮动本质※ 清除浮动的方法1.额外标签法2.父级添加overflow属性方法3.使用after伪元素清除浮动4.使用before和after双伪元素清除浮动浮动普通流(normal flow) 这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。前面我们说过，网页布局的核心，就是用CSS来摆放盒子

4. 页面布局侧边菜单 (.sidemenu) 宽度占 25%，内容区域 (.content) 宽度占 75%，并且并排显示。这两个部分都使用 float: left; 进行布局。侧边菜单使用 ul 作为导航列表，去除 list-style。清除浮动，确保父容器能够正确包裹浮动元素

最新发布

03-31

不过要注意的是，浮动元素可能会导致父容器高度塌陷，所以需要清除浮动。常见的清除浮动方法有使用clearfix类，或者在父容器上设置overflow:hidden。然后，父容器包裹这两个浮动元素，可能需要给父容器一个明确的...

在 HTML 中清除浮动四种的方法

原地起飞

08-21

5745

文章目录为什么要清除浮动清除浮动本质一、语法二、清除浮动的方法1.额外标签法2.父级添加 overflow 属性3.父级添加 after 伪元素4.父级添加双伪元素为什么要清除浮动由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子（由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响）。清除浮动本质清除浮动的本质是清除浮动元素脱离标准流造成的影响如果父盒子本身有高度，则不需要清除浮动清除浮动之后，父级

重温清除浮动方法，逐句解释clearfix的意义

Lifesama的博客

09-20

1184

清除浮动，clearfix，单伪元素清除浮动，双伪元素清除浮动

常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？

IT修真院：初学者转行到互联网的聚集地

05-21

1345

这里是修真院前端小课堂，本篇分析的主题是【常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？】大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师（职业）css任务1，深度思考中的知识点——常见的inline元素、block元素、inline-block元素有哪些？它们之间有什...

清除浮动的方式

ihuhuh的博客

03-08

112

清除浮动的方式： 1. 定高法：直接给父元素设置高度height 应用：适合用于高度写死的部分。比如网站的头部模块弊端：高度写死，不利于页面后期维护 ; 2. overflow:hidden ; 给父元素添加 overflow:hidden 弊端：定位溢出的元素会被隐藏 3. 额外标签法： ...

父级元素与子集元素浮动影响的解决

weixin_38170137的博客

08-11

332

子元素浮动对父元素的影响

weixin_44645309的博客

12-30

2219

文章目录前言1.父元素不浮动时2.父元素也浮动时3.小结前言我们都知道子元素浮动会导致父元素高度坍塌，子元素和父元素都浮动的话，父元素还会出现高度坍塌的情况吗？ 1.父元素不浮动时首先我们设置三个盒子a、b、c,分别为爷爷元素、父元素、子元素。c浮动，a、b不浮动。代码： <!DOCTYPE html> <html> <head> <style> .a { width: 300px; ..

父亲浮动，子代也会跟着走

weixin_34354173的博客

03-05

131

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>无标题文档</title> 6 <style> 7 #a{width...

给子元素添加float浮动以及父元素清除浮动

m0_54102950的博客

03-06

555

float:left 左浮动左浮动跟div初始状态没有区别 .box1 { width: 100px; height: 100px; background-color: green; /* 左浮动 */ float: left; } 效果 float：right 右浮动可以让小div盒子放在大盒子的右边 .box2 {

浮动元素父元素设置css清除浮动的方法

lansing_1995的博客

09-05

1210

图像的浮动会让接下来的内容环绕在它的周围，不过，父元素的高度却不受浮动元素的影响了，不清除浮动会影响接下来的布局。一，为父元素加入clearfix类 .clearfix:before,.clearfix:after{ content: "*****"; display: block; } .clearfix:afte

关于子元素浮动引起的父元素高度问题

weixin_44343449的博客

06-21

913

当父元素的所有子元素都浮动时，子元素高度会为0。解决： 1：设置父元素的高度height（不推荐） 2：父元素设置为浮动（不推荐） 3：父元素的overflow属性设置为hidden。（如果没有元素需要隐藏，可以使用。） 4：在子元素后追加元素如<p style = "clear:both"></p>(推荐) ...

【疑点】当子元素全部浮动时，怎么解决父元素塌陷的问题？

C84395836的博客

11-05

403

问题描述：在我们让元素浮动的时候，它就会离开原来的文档流，将它原先占有的空间释放。打个比方，父元素就如一个有伸缩性的容器，而子元素就如一个气球。当没有设置容器的高宽时，他的高宽完全是被装在里面的气球撑开的，当子元素浮动时候，就像气球从容器里飘了出来，飘在了他的上方。而此时容器也就空了，由于伸缩性，高度就变为了o，看不见了。而我们想要父元素显示出来，正常得被子元素撑开，怎...

子元素浮动后，父元素自动撑开的办法，一般都是高度

xlei1123的博客

01-03

4374

一，子元素最后加上二，父元素中设置overflow:hidden;属性