基础知识之浮动

本人前端小白一枚，正在自学前端希望利用博客记录并深入挖掘前端的知识。首先从浮动开始。

浮动的作用

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。比如在一个大div中有两个靠左右的布局时就可以使用浮动。

浮动使用方法：

style{
.divv{`float：<right>||<left>
}
`}

           

浮动使用注意事项：

当我们在写完一个

style{
.aa{
background-color=#eee;}.left{
float:left;
background-color:red;}
.right{
float;
background-color:red;}}
body{<div>
<div class="left">12233</div>
<div class="right">5678</div>
</div>
<div class="aa"></div>}
           

`

我们会发现后面的div aa位置在前面的大div上了。原因是因为我们给了红绿两个div浮动缺没有清除浮动，红绿div脱离文本流，父容器中宽高没有子元素撑起来，父容器宽高将为零，所以后面的灰色div会占据红绿div的位置。

所以

• 写了浮动必须要清除浮动，让父元素重新计算所需的宽高，不影响后面的布局。 清除浮动方式主要是在style中写样式clear：both；并在浮动的div后面加上div并引用该样式；
• 浮动兼容所有的浏览器，所以我们在布局的时候应该首选浮动，定位的性能最差，如非（写侧边栏fixed）必要先使用float。