float（CSS浮动）

html-css013

float（CSS浮动）,第1张

1、浮动元素会完全脱离文档流，不再占据文档流中的位置

2、设置浮动以后元素会向父元素的左侧或右侧移动，

3、浮动元素默认不会从父元素中移出

4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素

5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离， 将会无法撑起父元素的高度，导致父元素的高度丢失。

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

思想：在父元素的后面加内容，内容利用clear清除浮动元素带来的影响

css浮动（float：none | left | right）在网页布局中我们经常使用的属性，也是经常会出现Bug的地方。

首先我们要搞清楚为什么要用到float呢?

网页布局中块级元素，在页面中独占一行，自上而下排列，也就是传说中的文档流。

可是我们要实现左右模块该怎么实现，这就需要用到float了，当我把第三个设置左浮动

然后我们在测试第四个也设置左浮动

下面我将第二个和第四个右浮动

我们在测试将第三个浮动取消

可是在做网页布局的时候不想浮动元素影响遮盖下一个元素该怎么解决？

这个时候就需要我们清除浮动（clear：both | left | right）

上面的例子 希望第三个左浮动，第二个和第四个右浮动，第五个不受影响在最下面。