13-14 浮动布局与清除浮动

一、浮动布局

浮动可以解决的问题：

1. 浮动可以解决文字包围图片的问题。
2. 浮动可以解决莫名奇妙的间隔问题。
3. 浮动可以向左，向右进行排版对齐。

注意：浮动设置元素，脱离正常的文档流，向左或向右，靠近父元素的边缘或者设置了浮动的其他的元素的边缘靠拢。

(1)浮动可以解决文字包围图片的问题

还没使用浮动布局前
使用浮动布局向左浮动后

解决文字包围图片问题
（2）浮动可以解决莫名奇妙的间隔问题。
父元素为300px，子元素为100px（被设为行块元素），不能放置有一行中。

解决方法一：
删除子元素代码间的空格
解决方法二：
浮动布局float
解决方法三：
把字体大小设为0

3. 浮动可以向左，向右进行排版对齐。

二、清楚浮动

浮动的高度塌陷问题！

例子：把父元素的高度取消了后（子元素高度不变），父元素就没有高度了。原因是子元素脱离了文档流，副元素找不到子元素，副元素以为自己没有孩子了。
解决方案：
1、设定副元素高度；
2、创建div，用清除浮动的方法让它重新计算自己有没有子元素。（是万能的，一定能解决但不够理想）
3.最佳解决方案： 伪元素清除浮动。

不想设置高度，默认用子元素撑开副元素的高度（例如新闻），就要用到清楚浮动。
（2）创建div清除浮动
（3）伪元素清除浮动
写一个清除浮动的类，要用时加在父元素类名后面