浮动
块级元素同行显示
- display:inline-block; 中间存在5px的间距,存在兼容问题
- 浮动
浮动
-
可以让元素同行显示,排列不下自动换行
-
语法:
float:left | right |none;
- left :左浮动
- right:右浮动
- none:不浮动,默认值
-
特点:
- 浮动元素可以同行显示,排列不下会自动换行,不存在兼容问题
- 浮动元素会脱离文档流,在标准文档流之上
- 原来的空间不存在
- 行内元素设置浮动后,支持宽高
-
注意:
- 只有设置了浮动的元素,才可以同行显示
- 多个元素同时浮动,第一个浮动元素找父盒子的边界,后面的浮动元素找前面浮动元素的边界
- 块级元素设置浮动后,如果不设置width,默认是auto,宽度由内容决定
标准文档流
- 概念:在页面布局过程中,元素按照从左到右,从上到下,块级元素独占一行,行级元素共享一行的排列规范
脱离文档流
- 概念:在页面布局过程中,元素不再遵循标准文档流,按照自己的排列规范来排列
浮动对非浮动的影响
-
非浮动元素会占用浮动元素原来的位置
-
非浮动元素里面的文本会被浮动元素挤出来
-
实现图文混排
<style> img{ float: left; width: 60px; } </style> <img src="img/img-8.jpg" alt=""> <p> 特点: 浮动元素可以同行显示,排列不下会自动换行,不存在兼容问题 浮动元素会脱离文档流,在标准文档流之上原来的空间不存在行内元素设置浮动后,支持宽高注意:只有设置了浮动的元素,才可以同行显示多个元素同时浮动,第一个浮动元素找父盒子的边界,后面的浮动元素找前面浮动元素的边界块级元素设置浮动后,如不设置width,默认是auto,宽度由内容决定 </p>
-
-
子元素浮动,父元素高度塌陷
清除浮动
-
通过clear属性来清除浮动,清除浮动元素对非浮动元素的影响
-
语法:
clear:left | right |both;
- left:清除左浮动的影响
- right:清除右浮动的影响
- both:清除左浮动和右浮动的影响
清除浮动的方法
-
给受影响的元素添加 clear属性
-
使用
<br clear="all">
将浮动元素和非浮动元素隔开 -
使用空白的div添加clear样式将浮动元素和非浮动元素隔开
<div style="clear:both;"> </div>
-
给父元素添加伪元素选择器来清除浮动(推荐使用)
.clearfix::after{ content: ""; clear: both; display: block; }
注意:overflow:hidden可以解决子元素浮动,父元素高度塌陷的问题,是取消浮动的影响,但并不是清除浮动,是借助BFC容器的特点,这个容器里面的浮动元素会参与父盒子的高度计算。