浮动由float控制
① 该属性可以使元素脱离文档流,在父容器中进行浮动,停靠到父元素的“内容边界”或其 它浮动元素的“边框”
② 浮动的元素会忽略元素间的“空格”,让同样具有该属性的元素“紧密”地排列在一起
③ 该属性通常用于处理一些需要紧密排列在一起的“块级元素”,如“导航条”、“相册”,或用于处理“图文混排”等
该属性有三个允许的值:
值 | 描述 |
---|---|
none | 默认,元素不进行浮动 |
left | 元素从左到右进行浮动 |
right | 元素从右到左进行浮动 |
示例
浮动注意事项
一个浮动元素会浮出文档流,若一个普通的“块级元素”内的子元素全部都浮动了,那么它的所有子元素就会全部浮出“文档流”,就等于当前块级元素无任何子元素,这时如果你没有给他显式的设置高度那么他的高度就会变为0
清除浮动
clear清除浮动带来的影响
属性值有:
值 | 描述 |
---|---|
none | 默认值,不清楚浮动影响 |
left | 清除左浮动元素带来的影响 |
right | 清除右浮动元素带来的影响 |
both | 清除左右两侧浮动元素带来的影响 |
① 第一种清除浮动的方法(不推荐)
直接在html页面内设置样式
② 属性如果设置到父元素上,将清除子元素浮动给他带来的影响(推荐)
注意事项:如果清除一个元素两侧的浮动,并不是一致向下的
如果对你有帮助可以点个赞支持一下,毕竟整理不易