[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& ...
随机推荐
- sprint test 添加事务回滚机制
1.原因: 单元测试的时候频繁操作数据库需要修改很多数据,造成不必要的操作,添加事务之后就可以重复对一条数据进行操作,并且在返回结果后进行回滚. 2.解决: 原先继承的是 AbstractJUnit ...
- vue组件间通信子与父
二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ ...
- Spring001--事务的传播机制
Spring事务的传播机制 本文来自于博客:https://blog.csdn.net/yuanlaishini2010/article/details/45792069 一.事务的嵌套概念 事务的嵌 ...
- web service接口 wsdl和asmx有什么区别
没有区别,只是后缀名的区别.Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立 ...
- Flask使用原生sql语句
安装pip install flask-sqlalchemy 创建数据库对象 # 设置数据库连接地址app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://r ...
- [AHOI2013]作业 (莫队+分块)
[AHOI2013]作业 (莫队+分块) 题面 给定了一个长度为n的数列和若干个询问,每个询问是关于数列的区间[l,r],首先你要统计该区间内大于等于a,小于等于b的数的个数,其次是所有大于等于a,小 ...
- SCUT - 131 - 小P玩游戏II - 贪心 - 平衡树
https://scut.online/p/131 首先假如钦定了一群人去打怪兽,那么可以把主要的任务都丢给b最大的人去打,这样不会更差.然后考虑枚举这个b最大的人,其他人陪练.一开始就是ai+k*b ...
- win10专业版Hyper-v下Docker挂载volume的方式使用Gitlab(汉化版)保存资料数据(使用外部redis)
目录 话题 (191) 笔记 (137) 资料区 (2) 评价 (33) 介绍 讨论区 话题 win10专业版Hyper-v下Docker挂载volume的方式使用Gitlab(汉化版)保存资料数据( ...
- vue路由的两种模式配置以及history模式下面后端如何配置
vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...
- 在虚拟机Linux中安装VMTools遇到的问题-小结
总结: 遇到的问题:No support for locale: zh_CN.utf8 可能的解决方法:1.sudo dpkg-reconfigure locale (重新配置?) 2.上一步失败,提 ...