解决浮动后的高度塌陷问题的四种方式

最新推荐文章于 2022-04-24 20:01:37 发布
最新推荐文章于 2022-04-24 20:01:37 发布
阅读量4.7k 收藏 18
点赞数 1
分类专栏： CSS3 浮动 高度塌陷 文章标签： html html5 css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52939119/article/details/118034174
版权
本文介绍了在浮动布局中，由于子元素浮动导致父元素高度塌陷的问题，并提出了四种解决方法：BFC、clear、使用伪类:after以及clearfix。通过开启BFC、设置clear属性、使用伪类:after来清除浮动影响，从而避免页面布局混乱。
摘要由CSDN通过智能技术生成

解决高度塌陷问题

首先来介绍一下高度塌陷问题
1、在浮动布局中，父元素的高度默认是被子元素撑开的。
2、当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失，高度丢失后，其下的元素会自动上移，导致页面混乱。

解决高度塌陷的四种方法：

  • BFC
  • clear
  • 使用伪类after
  • clearfix

一、BFC全称 (Block Formatting Context) 块级格式化环境

元素开启BFC的特点:
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含子元素

开启BFC的方式:
1、设置元素的浮动
2、将元素设置为行内块元素
3、将元素的overflow设置为一个非visible的值<

最低0.47元/天 解锁文章
他灿烂了夏
关注
专栏目录
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 938
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
清除浮动塌陷的4种经典套路
weixin_30240349的博客
10-18 115
【自古深情留不住，总是套路得人心。】 这些日子，各个朋友圈随时可以见到这句话的身影。的确人们常说：“多一点真诚，少一点套路。”，但是最终现象写实也是那么残酷和无奈。 同样在前端攻城狮的道路，我们都是真诚尽心尽力的去学习进取。奈何先是各大浏览器厂商的大战不断，导致我们这群学习的人苦不堪言，一片水生火热呀。不得不想进各种h...
清除浮动（解决高度坍塌的问题）的方法5种
m0_52247852的博客
12-06 1469
高度坍塌的根源 常规流盒子的自动高度，在计算时，不会考虑浮动盒子 如果父盒子没有给高度，但是里面的子元素浮动，或者绝对定位，固定定位，都会使这个子元素脱离文档流，使父元素不能够获取元素的高，也就是不能自适应子元素的高了，既然不能自适应子元素的高了，那么父元素的高就是0，那么后面的元素自然 就跑上来了。 方法一：给浮动元素的父辈容器添加高度 缺点: 需要手动添加高度, 如何后面子元素的高度发生变化之后,还行再次修改父辈的高度, 给后期的维护带来麻烦. 优点: 简单粗暴直接有效 <style>
解决浮动塌陷的几种方法
wangheng_hd的博客
09-18 658
确定浮动元素的高度时，可以直接给父元素加高 父元素自己也浮动，可以解决其自身元素浮动带来的高度塌陷，在父元素确实也需 要的时候 3.给父级元素加 overflow: hidden 、 auto 让父元素形成bfc结界，因此子元素浮动 不会对父元素的高度产生影响。使用场景子元素无法预知高度 4.给父元素添加一个专用类，只做清除浮动负面效果之用 .clearfix::after{ Content:" "; display:block; clear:both; } ...
css高度塌陷问题的解决方案
11-21
所以在开发中一定要避免出现高度塌陷的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">
文档流html开发中遇到的高度塌陷 浮动 定位产生的问题,.pptx
12-10
另一种解决浮动导致的高度塌陷的方法是使用“清除浮动”（clearing floats）。我们可以为父元素添加一个伪元素，如`:after`，并设定`content:""`和`clear:both`，或者在最后一个浮动元素后面添加一个实际的`<div>`并...
解决浮动高度塌陷的四种办法
spech1ess的博客
11-09 439
html部分代码 <body> <div class="container clean"> <div class="demo">1</div> <div class="demo">2</div> <div class="demo">3</div> <div class="demo">4</div> &
解决浮动塌陷问题的三个方法
weixin_45995139的博客
12-13 850
1. 给父元素设置宽高（不到万不得已不能给父元素设置宽高） 2. overflow: hidden; 3. 用clear元素拦截浮动（left,right both）style="clear: left;" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
关于解决浮动塌陷的几种方法
kun_moon的博客
07-12 3881
关于盒子塌陷的几种解决方法 ①最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。 ②给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。 ③给父盒子添加overflow属性。 #...
常见的几种清除浮动（高度塌陷）的方法？
Problem_Girl的博客
01-16 1884
常见的几种清除浮动（高度塌陷）的方法？ 我们经常把解决高度塌陷问题叫做清除浮动。 高度塌陷问题------指父元素高度自适应（即父元素不设置高度或高度为auto，这时的父元素就靠子元素来撑开），子元素浮动float后，造成父元素高度为0的问题。 高度塌陷解决方法一： 给父元素设置高度。缺点就是父元素无法高度自适应，因为子元素的高度不确定，若把父元素的高度定死，则一旦浮动的子元素高度大于父元...
解决父元素因子元素设置浮动而产生的高度塌陷的四种方式
weixin_43338566的博客
04-16 247
父元素高度塌陷的原因：在没有设置高度的父元素内，子元素全部设置浮动以后，子元素脱离文档流，不在占有文档流的位置，因此父元素高度塌陷，对后面的元素排版将产生影响。 方式一：额外标签法 在父元素的后面添加一个空的块元素标签，并对这个空的块元素标签清除对他影响最大浮动。但是这种方法增加了无用的标签并且与结构与样式相分离的宗旨相违背。 完整代码如下： <!DOCTYPE html> <h...
网页浮动塌陷的解决办法
qq_67503717的博客
04-24 1279
网页清除浮动
浮动造成的高度塌陷问题
sherlock9866的博客
06-04 245
浮动可以解决一些很古怪的间隔问题，但是浮动也可能造成父盒子的高度塌陷问题。 首先明确，什么是高度塌陷。 我们先来看一个显示正常的情况： <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .parent{ ...
如何清除浮动
weixin_40380115的博客
04-19 171
浮动元素 浮动元素特点 1、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以用浮动元素来设置文字环绕图片的效果； 2、元素设置浮动以后，将会从文档流中脱离。此时的块元素不再独占页面的一行，块元素的宽度和高度是由内容撑开。 3、当行内元素（如：span）脱离文档流以后会变成块元素，特点和块元素一样，可以设置宽和高。 浮动元素的高度塌陷问题 在浮动布局中，父元素的高度默认是被子元素撑开，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素
关于浮动导致的高度塌陷问题的解决方法
weixin_45243726的博客
09-18 271
浮动float 特性： 1.浮动元素会脱离标准流不占据界面位置形成了层次压盖底下的标准流元素 2.浮动脱离标准流但是不脱离文本流(文本环绕浮动元素放置！！) 3.浮动元素遇见浮动元素立即停止 4. 浮动从上往下影响 由于第一个特性，导致了高度塌陷，会使添加在浮动下方的盒子被浮动的元素覆盖。 解决方法： （1）给父盒子加高度（不好用）...
div+css清除浮动塌陷的四种解决方案详解
"本文主要介绍了CSS布局中清除浮动塌陷的四种方法，旨在帮助开发者解决在使用浮动布局时遇到的问题。文章首先解释了浮动的概念及其特性，并通过一个示例演示了浮动导致的塌陷问题。然后，作者详细阐述了如何通过设定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

他灿烂了夏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值