[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& ...
随机推荐
- Java ——JDBC数据库编程
数据库分类 关系型数据库:以表来存放数据的,数据与数据之间的关系通过表之间的连接体现 面向对象的数据库:保存的是对象本身 其它 数据库:数据库管理系统中创建一个个的保存数据的单位 数据是保存在数据库的 ...
- Java ——方法
本节重点思维导图 方法的定义 例题:1!+2!+3!+4!+…..+15!=? public class Demo { public static void main(String[] args) ...
- OO第三单元单元总结
目录 JML知识梳理 部署JMLUnitNG/JMLUnit 按照作业梳理自己的架构设计,并特别分析迭代中对架构的重构 按照作业分析代码实现的bug和修复情况 阐述对规格撰写和理解上的心得体会 JML ...
- TypeScript + Webpack 环境搭建
TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...
- Tesseract5.0训练字库，提高OCR特殊场景识别率，合并字库（二）
一.准备工作 需要的文件 tif文件和box文件. 如果你打标打好了,但是是分批次打标的,那么可以合并字库,我们最初只需要 tif 和 box 文件,如下: 二.生成对应的 .tr 训练文件 根据不同 ...
- MySQL学习笔记（上）
在进行SQL注入原理的剖析的时候,对MySQL数据库掌握薄弱,参照菜鸟教程的MySQL教程速刷一遍MySQL 关于MySQL MySQL是最流行的关系型数据库管理系统,在WEB方面MySQL是最好的R ...
- MySQL-第十篇多表连接查询
1.SQL92规范.SQL99规范 2.广义笛卡尔积,多表之间没有任何连接条件,得到的结果将是N x M条记录. 3.SQL92中的左外连接.右外连接,连接符有(+或*),放在连接条件那一边就叫做左或 ...
- There is no Action mapped for namespace [/] and action name [TestAction] ass
1.修改action的name值 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE strut ...
- qemu-kvm使用
创建镜像qemu-img create -f qcow2 test-vm.qcow2 10g 修改镜像大小qemu-img resize test-vm.qcow2 +10G 安装系统 qem ...
- 【错误】Publishing to Tomcat'has encountered a problem
tomcat 启动工程时候出现 Publishing to Tomcat'has encountered a problem错误 解决方案 之后重启tomcat 就可以正常启动了