一、浮动布局

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

二、清除浮动

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

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

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

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

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

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

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