CSS-高度塌陷问题
CSS-高度塌陷问题
表现
例如:
HTML:
<div class="first">
<div class="first-child1">first-child1</div>
<div class="first-child2">first-child2</div>
</div>
<div class="second">
second
</div>
<div class="third">
third
</div>
CSS:
.first{
width: 300px;
background-color: pink;
}
.first .first-child1,.first .first-child2{
float: left;
width: 100px;
height: 100px;
}
.first .first-child1{
background-color: purple;
margin-right: 10px;
}
.first .first-child2{
background-color: red;
}
.second{
width: 200px;
height: 150px;
background-color: blue;
}
.third{
width: 100px;
height: 150px;
background-color: green;
}
表现为:
产生的原因
由上面的例子可以看出,first盒子没有设置高度,由子元素撑开,但是由于子盒子设置了浮动,脱离了标准流,所以导致first盒子没有高度,表现为second和third盒子向上移动了。
可以得出产生高度塌陷的原因:
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。
高度塌陷的解决办法:
给父元素设置固定高度。但是使用这种方式后,父元素的高度就不能根据子元素自动撑高了,可以根据自己页面的特点,如果可以固定高度,可以使用这种方式,否则,不推荐这种方式。
额外标签法,这是w3c推荐的解决方案,但是不推荐,因为html的原则是写出语义化的标签,这种方式会额外增加无意义的标签。
<div class="first">
<div class="first-child1">first-child1</div>
<div class="first-child2">first-child2</div>
<div style="clear: both;"></div>
</div>
父元素的overflow属性(开启元素的BFC):
.clearfix{
overflow: hidden;
}
使用这种方式,属性值可以是非visible(hidden/auto/scroll)中任意,但是建议用hidden。
这种方式副作用较小,这种方式在ie6中不支持,可以外加zoom: 1;
.clearfix{
overflow: hidden;
zoom: 1;/*针对ie6*/
}
单伪元素after清除浮动(开启元素的BFC):
.clearfix::after{
content: "";/*伪元素内容为空*/
display: block;/*非默认的就行,也可以是table等等*/
height: 0;/*伪元素高度为0,不影响其他元素*/
clear: both;/*清除浮动*/
visibility: hidden;/*不可见*/
}
.clearfix{
zoom: 1;/*ie6元素没有BFC模式,但是这句代码会开启ie6中的hasLayout模式,只在ie中支持*/
}
这种方式现在使用比较广泛,很多大网站都是使用这种方式,副作用较小,只需要在配合处理ie6就可以了。
双伪元素清除浮动(开启元素的BFC):
.clearfix::before,.clearfix::after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;/*ie6元素没有BFC模式,但是这句代码会开启ie6中的hasLayout模式,只在ie中支持*/
}
这种做法写法比较麻烦,也不推荐。
清除浮动对父元素的影响后的效果:
BFC相关
根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context,简称BFC,该属性可以设置打开或者关闭,默认是关闭的。
当开启元素的BFC以后,元素将会具有如下的特性:
- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动的子元素
CSS-高度塌陷问题的更多相关文章
- CSS高度塌陷
问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="paren ...
- CSS高度塌陷问题与解决办法
问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...
- CSS高度塌陷问题解决方案
高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- css float父元素高度塌陷
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...
- CSS: inline-block的应用和float块高度塌陷
普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象. 高度塌陷解决方法: ...
- css关于浮动的高度塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css之高度塌陷及其解决方法
浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...
- css浮动导致的高度塌陷问题及清楚浮动的方法
浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...
- CSS浮动布局带来的高度塌陷以及其解决办法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- 如何解决浮动元素高度塌陷---CSS
解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...
随机推荐
- python多版本管理包pyenv
前言: CentOS7 默认版本 python2.7.5 ,但是目前项目开发都是在python3的环境下,而单独编译安装python3时会出现各种异常!!! 系统默认python2.7又不能删除,否 ...
- Android-Java-抽象类
定义抽象类,就一定会定义抽象方法,抽象方法没有方法体{},就证明抽象方法 是不运行的,抽象方法 是给子类继承覆盖运行的, 子类继承->抽象类 就必须覆盖抽象方法,否则编译都失败: 水果案例: 定 ...
- 【接口时序】8、DDR3驱动原理与FPGA实现(一、DDR的基本原理)
一. 软件平台与硬件平台 软件平台: 1.操作系统:Windows-8.1 2.开发套件:无 3.仿真工具:无 硬件平台: 1. FPGA型号:无 2. DDR3型号:无 二. 存储器的分类 存储器一 ...
- Android开发 - 掌握ConstraintLayout(三)编辑器
从本篇博客开始我们开始介绍如何使用ConstraintLayout. 既然ConstraintLayout叫约束布局,首先我们先介绍什么叫约束(Constraints): 约束(Constraints ...
- 微信小程序如何调用API实现数据请求-wx.request()
前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.requ ...
- C3P0连接池、DBCP连接池
C3P0连接池: 配置文件:c3p0-config.xml <?xml version="1.0" encoding="UTF-8"?> <c ...
- Web开发经验谈之F12开发者工具/Web调试[利刃篇]
引语:如今的整个Web开发行业甚至说整个软件开发行业,已经相当成熟,基本上已经很少找不到没有前人做过的东西了,或者换句话说,你想要实现的功能,你总能在某个地方搜索到答案,关键是你有没有这个时间精力去搜 ...
- Spring.Net实现跨数据库服务层事务管理
在实际项目中用了Spring.Net框架之后,发现这框架在处理数据库事务上特别强大,声明式的数据库事务解放了一般开发人员对数据库事务操作的复杂处理.尤其是多数据库事务处理上,尤为显得更简便,几个简单的 ...
- PyTorch(一)Basics
PyTorch Basics import torch import torchvision import torch.nn as nn import numpy as np import torch ...
- 200行代码实现简版react🔥
200行代码实现简版react