一、浮动及浮动的特点
通过浮动 可以使一个元素向其父元素的左侧或者右侧移动
使用float属性设置元素的浮动
可选值:
none默认值 元素不浮动
left元素向左浮动
right 元素向右浮动
元素设置浮动以后,水平布局等式便不需要强制成立
元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,
所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点:
- 浮动元素会完全脱离文档流,他不在占据文档流的位置
- 设置浮动以后 元素会向父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时,不会超过它前面的其他浮动元素
- 浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
- 浮动元素不会超过它上边的浮动的兄弟元素 最多就和它一样高
- 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围
所以我们可以利用浮动设置文字环绕图片的效果 - 元素设置浮动以后将会从文档流中脱离
脱离文档流特点:
块元素:
1. 块元素不在独占页面一行
2. 脱离文档流以后,块元素宽度和高度默认都被内容撑开
行内元素:
1. 行内元素脱离文档流会变成块元素 特点和块元素一样
脱离文档流以后,不需要再区分块和行内了
浮动主要作用:让页面中的元素可以水平排列 通过浮动可以制作水平方向布局
二、高度塌陷和BFC
高度塌陷问题:
在浮动布局中,父元素的高度默认是被子元素撑开的
当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离
将会无法撑起父元素的高度,导致父元素的高度丢失
父元素高度丢失后其下的元素会自动上移,导致布局混乱
高度塌陷是浮动布局中比较常见的问题,这个问题必须处理。
高度塌陷的产生条件:
子元素浮动,脱离文档流
子元素绝对定位或固定定位,脱离文档流
BFC(Block Formatting Context)块级格式化环境:
BFC是CSS中隐含的属性 可以为一个元素开启BFC
开启BFC后该元素会变成一个独立的布局区域
元素开启BFC后的特点:
1. 开启BFC的元素不会被浮动元素所覆盖
2. 开启BFC的元素 子元素和父元素的外边距不会重叠
3. 开启BFC的元素 可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC:
1. 设置元素的浮动(不推荐)
2. 将元素设置为行内块元素(不推荐)
3. 将元素的overflow设置一个非visable的值
常用的方式 为元素设置overflow:hidden开启BFC 使其包含浮动元素
三、高度塌陷最终解决方法
方案一
:给父元素一个固定的高度
缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推荐使用。
方案二
:给父元素添加属性 overflow: hidden;
优点:浏览器支持好,简单;
缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。
方案三
:在子元素的末尾添加一个空的 div ,并设置下方样式
div{
clear: both;
height: 0;
overflow: hidden;
}
优点:所有浏览器都支持,并且容器溢出不会被裁剪;
缺点:在页面中添加无意义的div,容易造成代码冗余。
方案四
:万能清除浮动法
此方法只能消除float带来的高度塌陷,无法消除position:absolute带来的高度塌陷
.box1::after{
/* after默认为行内元素 需要转换为块元素 */
display: block;
content: '';
clear: both;
}
通过向父元素最后添加一个块元素
然后通过clear
来清除其他元素浮动对添加元素的影响
就可以让父元素的高度被撑开。
如果不希望某个元素因为其他元素浮动改变位置,
可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear:
- 作用:清除浮动元素对当前元素产生的影响
- 可选值:
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
原理:
设置清除浮动后,浏览器自动为元素添加一个上外边距,使其不受其他元素影响