一. 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(第一种方法和第三种方法)。

[CSS]CSS浮动塌陷及解决办法的更多相关文章

  1. CSS常见兼容问题以及解决办法

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safar ...

  2. css 浏览兼容问题及解决办法 (2)

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. ...

  3. CSS高度坍塌原因及解决办法

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父 ...

  4. css之高度塌陷及其解决方法

    浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...

  5. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

  6. Chrome不支持css字体小于12px的解决办法

    我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chr ...

  7. css 浏览兼容问题及解决办法 (1)

    主流浏览器css兼容问题的总结 最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑. ...

  8. Chrome谷歌浏览器下不支持css字体小于12px的解决办法

    先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一 ...

  9. SpringMVC配置了拦截器(interceptors)却显示不出css、js样式的解决办法

    首先因为在web.xml里面配置了 <filter-mapping> <filter-name>characterEncodingFilter</filter-name& ...

随机推荐

  1. idea多行注释缩进

    选中多行代码 - 按下tab键——向后整体移动 选中多行代码 - 按下shift + tab键——向前整体缩进(整体去掉代码前面的空格)

  2. react 样式的写法之一 ---》styled-components的基本使用

    [react]---styled-components的基本使用---[WangQi]   一.官网地址 https://www.styled-components.com/ 二.styled-com ...

  3. Struts2异常:HTTP Status 404 - There is no Action mapped for action name addBook.

    HTTP Status 404 - There is no Action mapped for action name addBook. 在地址栏进行访问的时候,出现了这个错误信息,导致出现此异常的原 ...

  4. Maven 修改jdk版本

    Maven 修改jdk版本方法1: <build> <plugins> <plugin> <groupId>org.apache.maven.plugi ...

  5. levelDB Log-writer

    分析完KV在内存中的存储,接下来就是操作日志.所有的写操作都必须先成功的append到操作日志中,然后再更新内存memtable.这样做有两个有点:1可以将随机的写IO变成append,极大的提高写磁 ...

  6. Windows7无法删除EFI分区解决办法

    Windows7无法删除第二块儿硬盘的EFI分区的解决办法: 1.Win+R,diskpart. 2.在命令行中输入list disk 命令. 发现本机有两块儿磁盘,我们需要删除的EFI分区在磁盘1中 ...

  7. uve (mui/light7)写APP的使用心得(大坑);

    话说mui这个框架的UI确实挺好看的(个人觉得)所以项目使用了他,结果里面的坑太TM多,不得不说MUI做东西太不用心了,社区不活跃,提问都没人管!; mui第一个坑: 日期选择器默认值无效:使用代码跟 ...

  8. python 模块导入import和import from区别

    模块就是一个.py文件,在名字空间下导入模块导入import和import from,那么python 模块导入import和import from区别是什么呢 1,import 导入模块 impor ...

  9. python 搜索路径顺序查找

    但我们通过 import 或者frome .. import...查找模块的时候,当你导入一个模块,Python 解析器对模块位置的搜索顺序是 1.当前目录 2, 如果不在当前目录,Python 则搜 ...

  10. 关于html5 video

    获取视频长度 <video id="video" width="200px" height="auto" src="vide ...