一、浮动布局
- 浮动:元素就像漂浮起来了,不占页面的位置了
- 原理:使当前元素脱离普通文档流
- 属性:float | left| right| none
- 特点:元素浮动之后不占据原来的位置(脱标)
- 浮动的盒子在一行上显示,行内元素浮动之后转换为行内块元素
- 影响:因为不占页面位置了,导致整个布局混乱。
- 脱离文档流后,如果父元素的高度是靠子元素撑起来的就会出现高度坍塌,父元素的高度会变成0
二、清除浮动
当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误,这时候就需要清除浮动。
- 含义:清除浮动不是不用浮动,清除浮动产生的不利影响。
- 方法:
1. clear: left | right | both,通常都是使用clear:both属性
2. 通过在浮动元素的末尾添加一个空元素,设置 clear:both属性来清除浮动,但是这个方法成本太高,额外添加了一个元素,会让你多写很多的代码,且后期难以维护
![05e5287853bd103a0fef4d616e3d174f.png](https://img-blog.csdnimg.cn/img_convert/05e5287853bd103a0fef4d616e3d174f.png)
3.通过设置父元素 overflow 或者display:table 属性来闭合浮动,给父元素添加overflow:hidden
![7a1d9e8e4f571a38e67674d761c08b97.png](https://img-blog.csdnimg.cn/img_convert/7a1d9e8e4f571a38e67674d761c08b97.png)
4.伪元素清除浮动 这是最好的方法,推荐使用
![7f9daa4079170f1cf705dab466f0195f.png](https://img-blog.csdnimg.cn/img_convert/7f9daa4079170f1cf705dab466f0195f.png)
如果喜欢点击加关注,有什么问题或者建议可以在下方评论留言哦~~