介绍
1.css样式和页面以及呈现效果
2.需求：想要让图片标题位于图片右侧，样式如下图
此时发现呈现的效果是：section 也不再包围浮动元素了，它只包围非浮动的 元素。
以下提供三种方法解决这个问题
方法一：为父元素添加 overflow:hidden
overflow:hidden 作用：当子元素过大，父元素依旧保持原本大小，并对子元素进行剪裁；强迫父元素包含浮动的子元素
修改样式
最终效果
方法二：同时浮动父元素
首先给父元素添加浮动属性，不管其子元素是否浮动只要父元素浮动它会紧紧包裹子元素
修改样式
最终效果
问题：发现父元素浮动之后不再默认占满浏览器整个宽度，所以我们还要为其设置宽度
Tip: 浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它 本身有默认的宽度。
增加宽度
最终效果
footer元素由于section元素浮动其紧紧挨着footer元素 强制其呆在下方做法：clear:left
方法三：添加非浮动的清除元素
1.给父元素的添加非浮动元素
2.清除该元素
【解释】父元素一定会包裹着非浮动元素，清除会让子元素位于浮动元素下方，因此包含元素一定会包含这个子元 素——以及前面的浮动元素。
以下介绍两种 添加非浮动元素的方法
1.通过额外增加一个元素
1.给父元素的添加非浮动元素
2.清除该元素
2.用 CSS 来添加这个清除元素的方法
它只添加了一个清除的包含句 ‘.’ 点作为非浮动元素（必须得有内容，而句点是最小的内容。规则中的其他声明是 为了确保这个伪元素没有高度，而且在页面上不可见。
使用 clear:both 意味着 section 中新增的子元素会清除左、右浮动元素（位于左、右浮 动元素下方）。这里当然可以只用 left，但 both 也适用于将来图片 float:right 的情况。
