解决父元素不包围浮动元素的方法

介绍

---

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 的情况。