CSS学习第14天——浮动

在 CSS 中，我们通过 float 属性实现元素的浮动。浮动以后使元素脱离了文档流，且浮动只有左右浮动，没有上下浮动。

1.元素向左浮动

脱离文档流之后元素相当于在页面上增加了一个浮层来放置内容，此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。

 

上图为未脱离文档流的图片

 

 

图中为box1实现了脱离文档流

2.元素向右浮动

 

3.元素间隙问题

 

 

可以看到有图片是有空隙的

 

 

 

 在元素浮动之后，空隙消失了

4.浮动可以使元素水平摆放

原图：

 

浮动后：