CSS元素的浮动

浮动由float控制

① 该属性可以使元素脱离文档流，在父容器中进行浮动，停靠到父元素的“内容边界”或其 它浮动元素的“边框”
② 浮动的元素会忽略元素间的“空格”，让同样具有该属性的元素“紧密”地排列在一起
③ 该属性通常用于处理一些需要紧密排列在一起的“块级元素”，如“导航条”、“相册”，或用于处理“图文混排”等
该属性有三个允许的值：

值	描述
none	默认，元素不进行浮动
left	元素从左到右进行浮动
right	元素从右到左进行浮动

示例

浮动注意事项

一个浮动元素会浮出文档流，若一个普通的“块级元素”内的子元素全部都浮动了，那么它的所有子元素就会全部浮出“文档流”，就等于当前块级元素无任何子元素，这时如果你没有给他显式的设置高度那么他的高度就会变为0

清除浮动

clear清除浮动带来的影响
属性值有：

值	描述
none	默认值，不清楚浮动影响
left	清除左浮动元素带来的影响
right	清除右浮动元素带来的影响
both	清除左右两侧浮动元素带来的影响

① 第一种清除浮动的方法(不推荐)

直接在html页面内设置样式

② 属性如果设置到父元素上，将清除子元素浮动给他带来的影响(推荐)

注意事项：如果清除一个元素两侧的浮动，并不是一致向下的

如果对你有帮助可以点个赞支持一下，毕竟整理不易