css - 浮动（float）
为了防止后续忘记css一些常见的属性，每隔一段时间会记录有关于css相关的知识。这一章节主要介绍css 的float属性。
1、一些常见float的值
| 值 | 介绍 |
| left | 左浮动 |
| right | 右浮动 |
| none | 默认值 |
| inherit | 继承父元素float的值 |
2、特点
（1）会脱标， 在标准流中不占位置，浮动元素比标准流高出半个级别
（2）下一个浮动元素会在上一个浮动元素后面左右浮动
（3）浮动元素受上面边界的影响
3、清除浮动的方法
（1）给添加浮动的父元素设置高度
（2）额外标签法 --- 一般不使用
步骤一： 添加浮动父元素内容的最后添加一个块元素，
步骤二：给添加的块元素设置 clear:both
（3）伪元素清除法 --- 用的比较多
clearfix为父元素class ---添加浮动的父元素
（前两个为单伪元素）
.clearfix::after {
content: '',
display: block,
clear: both
}
或者
clearfix::after {
content: '',
display: block,
clear: both,
height:0,
visibility: hidden
}
或者 （双伪元素）
.clearfix::before, // 可以解决margin塌陷，margin塌陷的意思是，当给子元素设置magin时，父元素也出现了margin
.clearfix::after {
content: '';
display: table;
}
.clearfix::after{
clear: both;
}
（4）给设置浮动的父元素设置overflow:hidden
4、例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>设置浮动和清除浮动的方法</title> <style> *{ margin: 0; padding: 0; } ul { list-style: none; /* 清除浮动的方法 方法一： */ /* height: 50px; */ /* 方法五：BFC */ /* float: left; */ /* height: 50px; */ /* overflow: hidden; */ } li { float: left; } a { float: left; width: 80px; height: 80px; background-color: #159bd9; text-decoration: none; text-align: center; line-height: 80px; color: #000; font-size: 16px; border: 1px solid #fff; } .clearFloat { width: 400px; height: 400px; background-color: lawngreen; text-align: center; line-height: 400px; font-style: italic; } /* <!-- 方法二 添加额外的标签 --> */ /*.clear { clear: both; }*/ /* 方法三：单伪元素清除法 */ .clearfix::after { content: ''; display: block; clear: both;
// 下面两行可添加
//height:0; //visibility: hidden } /* 方法四：双伪元素清除法 */ /*.clearfix::before, .clearfix::after { content: ''; display: table; } .clearfix::after{ clear: both; } */ /* 方法五： overflow:hidden */ /* .clearfix { overflow: hidden; } */ </style> </head> <body> <ul class="clearfix"> <li><a href="#">衣服</a></li> <li><a href="#">裤子</a></li> <li><a href="#">鞋子</a></li> <li><a href="#">帽子</a></li> <!-- 方法二 添加额外的标签 --> <!-- <div class="clear"></div> --> </ul> <div class="clearFloat"> 清除浮动 </div> </body> </html>
