[CSS]CSS浮动塌陷及解决办法

news/2024/4/19 0:06:51

一. CSS浮动

先看一个例子

<html !DOCTYPE><head><title>HTML2</title><style>.div-outer {border: solid 2px #223344;}.div1 {width: 200px;height: 100px;border: solid 2px #667788;}.div2 {width: 200px;height: 100px;border: solid 2px #667788;}.div3 {width: 200px;height: 100px;border: solid 2px #667788;}</style></head><body><div class="div-outer"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></div></body>
</html>

页面如图所示
图片描述

在div-outer内部的三个div默认每个div会占一行,所以三个div会成列显示。

现在对div1设置float: left,页面如图所示
图片描述

可以看到div2和div3重合了。
对div1设置float: left属性,div1脱离文档流,但是仍占据位置,div2和div3重合是因为div2位置不变,div3也在div2的位置。但是发现这样理解是不对的,正确的理解是div2被div1挤到了现在div3的位置。
因为如果对div1设置float: right,页面如图所示
图片描述

所以如果对div1设置float: left时,div2会被div1挤到现在div3的位置。

二. CSS浮动塌陷

如果对div1,div2,div3都设置float: left,但是父元素div-outer没有设置宽度和高度,页面如图所示
图片描述

如果没有设置父元素高度,父元素的高度默认是auto,会随子元素的高度而改变,如果对div1,div2,div3都设置float: left,那么此时父元素高度为0,这就是浮动塌陷。

三. 解决方法

1. 添加一个新的div

在div3下面添加一个宽度为0,高度为0,并且设置clear: both属性的空div。

.div4 {clear: both;
}<div class="div4"></div>

页面如图所示
图片描述

父元素的高度可以显示了。

2. 设置父元素属性

对父元素设置属性overflow: hidden或overflow: auto,

.div-outer {border: solid 2px #223344;overflow: hidden;
}

设置overflow: hidden的意思是,overflow规定当内容溢出元素框时发生的事情,
图片描述
因为父元素没有指定高度,默认是auto,所以需要计算父元素包含的内容的高度,这样子元素浮动的高度就被计算进去,解决了浮动塌陷。

页面如图所示,
图片描述

或者对父元素设置属性display: table,

.div-outer {border: solid 2px #223344;display: table;

设置display: table的意思是,使父元素形成了BFC(Block Form Content),
BFC有三个特性:

  1. 防止上下margin重叠
  2. 防止浮动元素重叠
  3. 防止浮动塌陷

overflow: hidden也形成了BFC,BFC会将子元素的浮动高度计算进去,解决浮动塌陷。

页面如图所示,
图片描述

不同之处在于设置属性overflow: hidden,父元素宽度会是100%,而设置属性display: table,父元素的宽度会随子元素变化,。

3. 内墙法

在父元素后面使用伪元素:after,

.div-outer:after{display: block;content: "";height: 0;clear: both;
}

这种方法的作用和第一种方法是相同的,只不过没有在div3后面再添加一个空的div,因为添加div会影响性能。

display: block;
content: "";
height: 0;

这就类似添加了一个空的div,然后设置属性clear: both。

总之,清除浮动塌陷就是对父元素设置属性使其形成BFC(第二种方法),或者添加一个空的div(第一种方法和第三种方法)。


https://dhexx.cn/news/show-2631790.html

相关文章

查询一个表中的两个字段值相同的数据

比如有下面的表&#xff1a;person 看到id1和id5,id2和id6的两行数据中的&#xff0c;name,city值相同&#xff0c;那么怎样把它查询出来呢&#xff1f; 先看下面的一条SQL: select p1.name,p1.city from person p1,person p2 where p1.namep2.name and p1.cityp2.city; 这条…

一个任意获得页面控件的方法

在写程序的时候经常会动态找某个控件&#xff0c;写了个函数方便查找&#xff0c;第一个参数是要查找的控件容器&#xff0c;第2个参数是控件的名称&#xff0c;返回的是一个控件对象&#xff0c;使用的时候转换一下类型就可以了 1privateControl seachControl(Control it,stri…

JUPTERNOTE不同类之间相互调用(调用IPYNB文件)

转载自&#xff1a;jupternote不同类之间相互调用&#xff08;调用ipynb文件&#xff09; - 灰信网&#xff08;软件开发博客聚合&#xff09; 本文只做个人记录学习使用&#xff0c;版权归原作者所有。 在jupternotebook中&#xff0c;如果直接尝试调用其他文件&#xff0c;会…

橡皮筋进度条ElasticProgressBar

2019独角兽企业重金招聘Python工程师标准>>> 橡皮筋进度条ElasticProgressBar 橡皮筋进度条是一个极具动画效果的进度条。该进度条不仅具有皮筋效果&#xff0c;还带有进度数据显示&#xff0c;让用户可以很清晰的看到当前的进度&#xff0c;可用于下载、加载进度等…

CodeSmith终极玩法

CodeSmith是一个模仿asp.net运行机制 的代码生成器, 运行时分析模板(相当aspx文件)的预编译指令和主体内容, 生成一个继承自CodeSmith.Engine.CodeTemplate(相当于System.Web.UI.Page)或者一个在 Inherites预编译指令指定的类(相当于CodeBehind类)的源码, 且把它编译. 然后把这…

Vue2.x学习四:过渡动画

Vue 在插入、更新或者移除 DOM 时&#xff0c;提供多种不同方式的应用过渡效果。 请注意它的应用场景并不是说我们写了一个动画之后让它一直在动&#xff0c;而是在一个模块显示或隐藏的时候去做一种特效&#xff0c;使得它的过程有过渡性&#xff0c;而不是很突兀的直接消失或…

Colab使用教程及Colab Pro/Pro+评测

转载自&#xff1a;Colab使用教程&#xff08;超级详细版&#xff09;及Colab Pro/Pro评测 - 温柔的玉米 - 博客园 本文只做个人记录学习使用&#xff0c;版权归原作者所有。 在下半年选修了机器学习的关键课程Machine learning and deep learning&#xff0c;但由于Macbook P…

关于控制流量下载电影的几点说明

前几天有人问能不能做一个电影下载网站。他们旧网站的功能是用户购买点数&#xff0c;然后根据下载电影来扣点数&#xff0c;这样做的缺点是因为提供的是真实下载地址&#xff0c;一旦网络问题&#xff0c;或其他原因&#xff0c;用户电影还没有下载完&#xff0c;但点数已经被…

clover

2019独角兽企业重金招聘Python工程师标准>>> 1. 制作nandflash镜像 1.1 编译开发板提供的内核 问题1&#xff1a;arm-linux-gnueabi-gcc: error: directory: No such file or directory 参考&#xff1a; http://elastostester.elastos.org/2015/01/29/allwinner4_2…

asp.net 2.0中 TreeView 控件

asp.net 2.0中 TreeView 控件 2005年6月14日 11:16 前言&#xff1a;ASP.net 2.0 中&#xff0c;一些新的更加方便的控件被加了进来&#xff0c;为了方便自己学习这些控件&#xff0c;我把我自己学习这些控件的知识整理成这个系列文章。文章可能很简单&#xff0c;如果已经知道…