[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& ...
随机推荐
- hive重要命令
hadoop dfsadmin -safemode leave hadoop退出安全模式让提示符显示当前库: set hive.cli.print.current.db=true;显示查询结果时显示字 ...
- 练习2：python-把excel表格中某张表的内容导入sqlite
前言:最新需要用到大批量的数据,在excel造好数据之后,存储在数据库库中,方便调用数据,于是就想着用python语言写一下这个过程 python有个openpyxl的模块,可以直接用来对于excel ...
- charles_02_模拟弱网测试
前言 用户使用app的场景是多变的,不一定稳定在WiFi或者4G网络下.大多数用户会在地铁.电梯等弱网情况下使用app,这些弱网情况下app常会出现一些数据丢失.闪退.页面展示不友好等情况.在测试过程 ...
- 应用安全 - 渗透测试 - .net网站
注入 注入 单引号检测 - 多数使用MSSQL数据库 常规注入绕过 "or''=' | 'or''=' 'or'='or' | 'or'='or'" 上传 加图片头GIF89A
- Java初始化块及执行顺序
理解 初始化块又称为代码块.属于类中的第四大成员.本质上是一个方法,它也有方法体,但没有方法名,没有参数,没有返回,而且也不是通过对象或类名显式调用,而是通过隐式调用 是构造器的补充 语法 [修饰符] ...
- JavaWeb servlet,乱码的原因和解决
请求为什么会有乱码? 答:当表单提交时,浏览器对中文参数值进行编码(使用打开表单所在的页面时的字符集进行编码,web服务器在默认情况下会使用iso-8859-1去解码,编码和解码方式不一致,就会产生乱 ...
- 手动刷新客户端配置内容(Spring Cloud Config)
手动刷新客户端配置内容 客户端项目增加依赖项 <dependency> <groupId>org.springframework.boot</groupId> &l ...
- Python pass是空语句用法
在条件判断,还是函数中,有时候不需要输出任何东西,也不能留空,python提供空的语句,下面讲述pass空语句的用法 1,关键词 pass 2,用法 for letter in 'Python': i ...
- xps9560黑苹果展示
花费了一些时间来安装黑苹果 - - ., 展示一波 更换了DW1820a无线网卡,花费70+ 手上这台笔记本,在安装黑苹果的时候基本没遇见太大的问题,一路顺风顺水. 桌面,程序坞调小放在左侧 极 ...
- 基于socket实现大文件上传
import socket 1.客户端: 操作流程: 先拿到文件--->获取文件大小---->创建字典 1.制作表头 header 如何得到 他是一个二进制字符串 序列化得到 字典字符串 ...