css中的浮动布局 css浮动的用法

一、浮动布局

• 浮动：元素就像漂浮起来了，不占页面的位置了
• 原理：使当前元素脱离普通文档流
• 属性：float | left| right| none
• 特点：元素浮动之后不占据原来的位置（脱标）
• 浮动的盒子在一行上显示，行内元素浮动之后转换为行内块元素
• 影响：因为不占页面位置了，导致整个布局混乱。
• 脱离文档流后，如果父元素的高度是靠子元素撑起来的就会出现高度坍塌，父元素的高度会变成0

二、清除浮动

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误，这时候就需要清除浮动。

• 含义：清除浮动不是不用浮动，清除浮动产生的不利影响。
• 方法：

1. clear: left | right | both，通常都是使用clear：both属性

2. 通过在浮动元素的末尾添加一个空元素，设置 clear：both属性来清除浮动，但是这个方法成本太高，额外添加了一个元素，会让你多写很多的代码，且后期难以维护

3.通过设置父元素 overflow 或者display：table 属性来闭合浮动，给父元素添加overflow：hidden

4.伪元素清除浮动 这是最好的方法，推荐使用

如果喜欢点击加关注，有什么问题或者建议可以在下方评论留言哦~~