CSS浮动

浮动的目的：让竖着的元素横着来

浮动的基本特点

float属性值为：
	- none: 默认值，不浮动
	- left：左浮动，元素靠上靠左
	- right：右浮动，元素靠上靠右

1. 左浮动找左边,右浮动找右边
2. 浮动只影响后面的元素,不影响前面的元素
3. 父级元素的宽度小于浮动子元素的总宽度,子元素将被迫换行
4. 子元素高度不一致的浮动元素被迫换行时,可能被卡着
5. 结构先写的先浮动,后写的后浮动
6. 浮动元素的父元素没有高度时，会导致父级元素高度塌陷

1. 不设置宽度/宽度为auto时，适应内容宽度
2. 高度为auto时，与常规流一致，适应内容的高度
3. margin为auto，为0
4. 边框、内边距、百分比设置与常规流一样

1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子靠上靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流盒子
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时，会避开浮动盒子
6. 外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，涉及css属性：
clear
- 默认值：none
- left：清楚左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清楚右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

解决办法:
1: 给父元素添加高度

缺点: 不灵活

2: 给父级元素添加overfow:hidden;(触发了一个bfc区域)

缺点: 定位出去的元素将会被隐藏

3: 给浮动元素的最后面添加一个空标签(块级元素)
空标签的样式:

width: 0;
height: 0;
clear: left/right/both; /*左/右/都清除*/

缺点: 代码冗余

4: 万能清除法
子元素添加了浮动属性，给父元素添加万能清除法，则可以解决父元素高度坍塌的问题

.name:after{
	content:"";
	display:block;
	width:0;
	height:0;
	clear:both/left/right;
	overflow:hidden;
	visibility:hidden;
}

推荐使用

发布了11 篇原创文章 · 获赞 0 · 访问量 107

私信关注