CSS 浮动属性讲解和使用

目录

浮动(float)属性

浮动(float)的属性选项

浮动(float)属性用途

清除浮动的方法

结语

浮动(float)属性

        可以让元素向左或向右排列，其周围的元素也会重新排列，会脱离文档流。

 浮动(float)的属性选项

属性	作用
left	向左排列元素
right	向右排列元素
none(默认)	正常排列元素（文档流）

浮动(float)属性用途

        一般情况下，我们想让两个div元素成一排排列，我们可以使用display:inline-block;将div转成行内块元素，但是此方法有很多缺点，比如只是解决了将div元素放在一排，除此之外没有任何效果，而如果我们想要将一个盒子在左边，另一个在右边，则需要额外添加别的css属性，且每个div之间会有一个小空白，如下图。

 所以这种情况最好使用我们的float浮动属性，我们给每个div加上float:left;效果如下图。

 我们发现两个div是排列在一起也没有缝隙了，但是父元素div却消失不见了。出现这种情况的原因是float属性会使元素脱离文档流，也就是在文档中相当于去除了这两个元素的位置，所以父元素div的高度变成了0px。

文档流粗略的来讲就是每个元素默认的排列方式组成的内容，块级元素独占一行，行内元素可以多个元素在一行。当元素脱离文档流后，此元素在文档流原本的位置就没有了，相当于没有这个元素。

 要解决这个问题的方法就是清除浮动。

清除浮动的方法

     clear属性用来给元素清除浮动，下面是用法

1. 给父元素一个准确的高度(不推荐)。
2. 给父元素加上clear:both;(会让margin失效)。
3. 给父元素加上overflow:hidden;(溢出父元素的内容会消失)。
4. 给父元素加上浮动属性(影响总体布局，不推荐)
5. 标签法：在父元素最后面加入一个空的块级标签，加上css属性clear:both(额外冗余标签，不推荐);
6. 伪元素：

   .box::after,
   .box::before {
      content: '';
      display: table;
    }
   .box::after {
      clear: both;
   }

           方法6无任何额外标签和副作用比较推荐。

我们使用任意方法都可以清除元素的浮动，让父元素正常显示，如图。

这样一来我们就可以使用浮动进行布局了，同时浮动还会将该元素变成BFC元素，让我们更好的进行布局。

结语

CSS的浮动属性就讲完了，以后我会更新更多关于前端的知识，大家也可以私信问我一些问题和提一些建议。我会积极的给大家回复。