css浮动的使用

css的浮动记录

css的浮动是 float 属性 left 是左浮动 right 是右浮动

浮动最开始的设计出来是实现文字环绕效果的，后面人们发现浮动也可以用来布局，不过使用浮动布局的同时一定要注意清除浮动，要不然就容易出现问题

我们先来学习怎么给一个div开启浮动

<div class="box">
    <div class="float"></div>
</div>

<style>
.box { width:600px; height:100px; background: red }
.float { width: 100px ; height: 100px; background: pink }
</style>

最初的效果图是这样的

下面我们给float盒子开启浮动，就是给float添加float属性

.float { width:100px ; height : 100px ; float: left }

 给一个盒子设置 float:left 是开启左浮动 效果图还是一样，因为盒子刚开始就是靠左的，所以看起来是没有变化的

 这个时候我们把 left 改为 right 就可以看到粉色的盒子靠右了

.float { width:100px ; height : 100px ; float: right}

上面是浮动最基本的使用，我们使用浮动的时候一定要注意的事就是要清除浮动，因为浮动的元素和标准文档流的元素不一样，设置了浮动的元素是不占位置的，后面的元素就会把浮动元素的位置占了，所以大家使用浮动布局的时候还是要多多注意

清除浮动的方式有很多

第一种是在最后一个浮动的元素后面增加一个块级标签，给标签设置 clear: both 属性

第二种是给浮动元素的父盒子设置固定高度，就不会影响到盒子以外的元素

第三种是伪元素清浮，给浮动元素的父元素添加::after （常用）

.box::after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

第四种是直接给父元素添加 overflow: hidden 属性 （常用）

清除浮动的方法有很多，大家记住最常用的就行了

浮动的基本使用已经讲解完了，最后祝大家学习愉快！