CSS浮动Float

本人也是刚接触css所以有说的不对的和需要补充的，各位大神指点出来帮助本人提升，感谢！！

块级元素：

在Html布局中，基本都是利用属性的嵌套来完成页面的板块，然后进行css的美化布局，但首要了解的还是属于块级元素，在页面中单独占一行，默认是从上而下排列，俗称流。所以默认下，我们添加的元素都是由上而下排列。即便你每一行的

宽度不同，或可完全容纳，也不会成水平布局。

所以要进行更复杂的布局，我们就有了新的出发点：“如何在一行中显示多种元素”那么解决办法可以依靠css中的浮动。

浮动（float）：

概念：可以使得某个元素脱离标准流，“漂浮在标准流之上，和标准流相差甚远”

实例：

我们可以创建多个

元素进行测试布局。

<div class="element_1"></div> <div class="element_2"></div> <div class="element_3"></div>

创建三个为例，此时我们在网页中是看不到三个元素的，因为其未拥有任何属性。如图，刷新出来也是空的。

 

所以我们需要进行链接一个外部css，当然在网页内部也可以。

在

头部链接css文件

   

<link rel="stylesheet" type="text/css" href="css/main.css">

然后我们在css文件中给三个emelent元素添加属性，看的更清楚。

.element_1{width: 200px;height: 200px;background: rgb(175, 71, 71);}
.element_2{width: 200px;height: 200px;background: rgb(223, 103, 103);}
.element_3{width: 200px;height: 200px;background: rgb(97, 119, 192);}

如图：

 

可以看到此时的三个元素是成上下排列的。那么我们可以使用浮动使其水平排列。只需在每个element的css属性中添加float属性

.

.element_1{width: 200px;height: 200px;background: rgb(175, 71, 71);float: left;}
.element_2{width: 200px;height: 200px;background: rgb(223, 103, 103);float: left;}
.element_3{width: 200px;height: 200px;background: rgb(97, 119, 192);float: left;}

然后我们就可以得到如下图的效果。

 

重点：

语法：

float：none | left | right

默认值：none

适用于：所有元素

取值：

none：设置对象不浮动

left：设置对象浮在左边

right：设置对象浮在右边

以上就是对css中float浮动的主要运用了，还有更多用法可以自行探索哦。