[TOC]
浮动
定义
把元素从常规文档流中拿出来，不被包含在标记中的父元素之内了
目的1：实现文字围绕图片效果
<style>
p {margin:0; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}
</style>
<img …… />
<p>…the paragraph text…</p>
目的2：创建多栏布局
p {
float:left;
margin:0;
width:200px;
border:1px solid red;
}
img {
float:left;
margin:0 4px 4px 0;
}
几个相邻元素都设定了宽度，都是浮动的，水平空间足够。这样就会并排在一行。
围住浮动元素的三种方法（清除浮动）
为父元素添加overflow：hidden
- overflow：hidden用途1：放置包含元素被超大内容成大，包含元素依然保持其设定的宽度，超大的内容会被容器切割掉
- overflow：hidden用途2：强迫父元素包含其浮动的子元素
overflow:hidden
让父元素也浮动起来
- 父元素浮动，且width:100%与浏览器容器同宽;
- 下方元素用clear:both，被清除的元素不会提升到浮动元素旁边
添加飞浮动的清除元素（clearfix原则）
题目1:解释下浮动和它的工作原理？清除浮动的技巧
回答：（评价：前两个概念不清，技巧的理解不深入）
什么是浮动？浮动的工作原理是什么？
浮动就是元素脱离文档流，无视旁边的块级元素，朝左或朝右
清除浮动的几种方式？
- 父元素使用overflow:hidden
- clearfix原则（跟伪元素相结合，比如:after/:before）
- 父元素也使用浮动，但设置width，再后面的元素使用clear:both
答案：
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。；
- 使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
