牛客刷题-CSS-02【浮动和清除浮动】

1.

先看看W3Cschool的基础属性

float 属性

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

• none - 允许两侧都有浮动元素。默认值
• left - 左侧不允许浮动元素
• right- 右侧不允许浮动元素
• both - 左侧或右侧均不允许浮动元素
• inherit - 元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

浮动的定义

在非IE浏览器下，容器不设置高度，子元素浮动，容器不会被内容撑开，此时内容溢出到容器外面影响布局，这种现象就是浮动（溢出）。

浮动的工作原理

• 浮动元素脱离文档流，不占据空间。（包含框的高度小于浮动框，就会出现高度塌陷的问题
• 浮动元素会停留在包含框或者其他浮动元素的边框

 元素浮动之后不会影响块级元素的布局，只会影响内联元素的布局

浮动元素引起的问题

父元素的高度无法被撑开，影响与父级元素同级的元素。

与浮动元素同级的非浮动元素会紧跟其后

若浮动元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构。

清除浮动的方式

给父级div定义height属性

最后一个浮动元素之后添加一个空的div标签，并添加clear：both属性

包含浮动元素的父级标签添加overflow：hidden或者overflow:auto

使用:after 伪元素。由于IE6-7不支持：after，只用zoom：1触发hasLayout(最好的做法)

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.clearfix{
*zoom:1;
}