float
特性1：可以为行内浮动元素设置宽高
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span{ background-color: #e3a345; width: 200px; height: 200px; } </style> </head> <body> <span>123</span> </body> </html>
运行发现，宽高设置没有生效。加上float：left后，宽高设置生效了。前后结果变化：
2.两端自适应布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span{ background-color: #e3a345; width: 50px; height: 50px; float: left; } div{ background-color: red; width: 100%; margin-left: 60px; height: 80px; } </style> </head> <body> <span>left</span> <div>right</div> </body> </html>
运行结果：
clear
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
Clear给元素约定一个规则，哪一边不允许出现浮动元素，如果出现了，则通过改变自身的位置【换下一行】来适应这个规则
三个元素都float left，中间元素clear right 无效，clear left，则后续两个都换到下一行去了
规律：clear的方向要对应floar 的方向，换行之后，原本跟在自己后面的元素依然跟在自己的后面
包裹浮动元素
<style> .clearfix:after{ content:" "; display: block; height: 0; visibility: hidden; clear: both; } .container{ background-color: #0F9E5E; } </style> <div class="container clearfix"> <div style="float: left"> 123 </div> </div>
另一种包裹浮动元素的方式是 使用BFC