[CSS]CSS浮动塌陷及解决办法
一. 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有三个特性：
- 防止上下margin重叠
- 防止浮动元素重叠
- 防止浮动塌陷
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浮动塌陷及解决办法的更多相关文章
- CSS常见兼容问题以及解决办法
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safar ...
- css 浏览兼容问题及解决办法 （2）
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. ...
- CSS高度坍塌原因及解决办法
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父 ...
- css之高度塌陷及其解决方法
浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...
- float浮动造成高度塌陷的解决办法
Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...
- Chrome不支持css字体小于12px的解决办法
我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chr ...
- css 浏览兼容问题及解决办法 （1）
主流浏览器css兼容问题的总结 最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑. ...
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一 ...
- SpringMVC配置了拦截器（interceptors）却显示不出css、js样式的解决办法
首先因为在web.xml里面配置了 <filter-mapping> <filter-name>characterEncodingFilter</filter-name& ...
随机推荐
- 【ABAP系列】SAP ABAP中使用for all entries in小结
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP中使用for a ...
- CSP2019 —— 今年欢笑复明年，不知退役在眼前
关于2019CSP-J/-S的一些体会 又是一年退役季,想起在群里看到大佬的一句诗,感慨万千. 今年欢笑复明年,不知退役在眼前 于是便心生文意,随便写点东西来给自己康康. 先说说这次的成绩吧.大家应该 ...
- java 集合基础(适用单线程)
1.集合树状: Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set │├HashSet │├TreeSet │├Linke ...
- NoSQL基础学习
NoSQL基础学习 最近学习的第一个Nosql就是Mongodb,为了了解Nosql的基本知识,特地总结,主要是学习Nosql的理论 一.Introduction(介绍) 它是“ Not Only S ...
- Redis数据类型：Sorted Sets操作指令
Redis数据类型:Sorted Sets操作指令 Sorted Sets常用操作指令 Sorted Sets,本质是一个有序的Sets,其实在原来的Sets集合中对每一个元素新增了一个属性Score ...
- Javascript之谈对象
谈谈如何理解对象 使用预定义对象只是面向对象语言的能力的一部分,ECMAScript 真正强大之处在于能够创建自己专用的类和对象.面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意 ...
- java变量的类型
变量的类型 一 按数据类型分: 1.基本数据类型 : 整型 : byte (1字节 - (-128 ~ 127)) short (2字节) int (4字节) long (8字节) 浮点型 : ...
- Django中ORM的聚合索引
Django中ORM的聚合索引 在Django中,聚合函数是通过aggregate方法实现的,aggregate方法返回的结果是一个字典 在使用时需要先导入模块from django.db.mod ...
- 01-HTML控件
1.HTML (常用标签 网页的基本结构)2.CSS (常用样式 网页的显示效果)3.JavaScript (用户交互效果 动态效果)4.jQuery (JavaScript库 简化原生js操作)5. ...
- linux 修改 rsyncd.conf 配置文件
[root@rsync-server-1 ~]# cat > /etc/rsyncd.conf << EOF #Rsync server #created by sunsky 00: ...