css中浮动

css中浮动（float）类似于word中图文环绕方式，使得元素脱离原来文档流，使得其他元素查询排列，环绕浮动元素。例子类似如下：

float - CSS（层叠样式表） | MDNfloat CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。https://developer.mozilla.org/zh-CN/docs/Web/CSS/float要注意，浮动是针对块级元素的，在浮动中，为阻止浮动向下扩展，一般在最后一个元素配套clear属性。代码如下：

<main class="main">
...
<div style="clear:both"></div>
</main>

一般还有用伪元素（:after）清除浮动,代码如下：

.clearfix::after{
display:block;
content:" ";
clear:both;
}

还有一个修改版的清除方法，它将内容修改为table类型而不是block，给：before,:after都加上table

从而使所有子元素的外边距都包含子容器的顶部和底部之间，从而避免了外边距重叠问题，代码如下：

.clearfix::before,
.clearfix::after{
display:table;
content:" "
}
.clearfix::after{
clear:both;
}

当然采用浮动之后还好有其他等问题，如高度不等等，一般在新行开始第一个清除上面浮动

.media:nth-child(odd){ clear:left}