6.1.2.7 文档流
一、 标准文档流下有哪些微观现象?
1. 空白折叠现象
不管你有多少个空格,浏览器只显示一个
2. 高矮不齐,底边对齐
3. 内容多于一行,换行显示
display: block; 独占一行,可设宽高
display: inline; 不独占一行,不能设宽高
display: inline-block; 不独占一行,可设宽高
display:none; 不占位置
visibility: hidden; 不显示,但占位置
二、浮动
float: left | right
效果:两个元素并排显示,并且可以设置宽高。
浮动之后,就不区分行内元素或块元素
三个特性:
1. 浮动的元素脱标
脱标:脱离了标准流
2. 浮动的元素贴靠
3. 浮动的元素有“字围”效果
文字不会被浮动元素遮挡。
4. 浮动的元素有紧凑效果
如果一个元素设置为浮动,并且没有设置宽高,那么就自动收缩为文字的宽高。
margin-right: auto 水平居中
三、浮动带来的问题,清除浮动
子盒子动态高度,父盒子不设置高度。但带来的问题是:
后面的盒子会顶上去,跑到父盒子的下面去被遮盖。
解决问题:清除浮动
第1 种方式: 给父盒子设置高度,不推荐
这种方式不灵活,如果公司产品突然要改,要求父盒子加高,而且不只一处地方,需要手动修改原代码。很麻烦。
第2种方式:clear: both 内墙方法
给浮动元素最后面添加一个元素,并且该元素不浮动,然后设置clear:both 清除别人对我的浮动影响。
clear: left # 清除左边浮动对我的影响。
clear:right # 清除右边浮动对我的影响
这种办法的弊端是,无缘无故多了一个div元素,使结构冗余。
第3种方式:伪元素清除浮动 常用
.clearfix:after{
# 必须要写的这三个内容
content: '';
clear: both;
display: block;
}
# 新浪清除浮动的方法
.clearfix:after{
content: '.';
clear: both;
display: block;
height: 0px;
visibility: hidden;
}
给祖先元素添加类class="clearfix"
第4种清除浮动: overflow
给浮动元素的父元素添加:
overflow: hidden;
内容超出部分叫:overflow
overflow的值有以下几种:
默认:visible; 内容不会被修剪,会呈现在元素框之外。
hidden: 内容会被修剪,并且其余内容是不可见。
scroll: 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该人父元素继承overflow属性的值。