[CSS] 浮动 float属性、clear属性详解

一、浮动

1、简单描述

        设置了float属性的元素会根据设置的属性值左右浮动，该元素被称为浮动元素。

        浮动元素会从普通的文档流中脱离出来，但是浮动元素影响的不仅是自己，还会影响周围的元素对其进行环绕。

2、属性值

float属性值	说明
left	元素向左浮动
right	元素向右浮动
inherit	从父元素继承 float 属性的值
none	默认值，元素不浮动

3、作用

        使块元素可以横向排列。

二、清除浮动

1、简单描述

        clear 属性指定元素两侧不能出现浮动元素。

        清除浮动只能影响使用清除的元素本身，不能影响其他元素。

2、属性值

clear属性值	说明
left	不允许左边有浮动对象
right	不允许右边浮动对象
both	不允许有浮动对象
none	默认值，允许两边都有浮动对象

3、作用

        打破块状元素的横向排列