float特性
- 任何元素都可以使用float属性,行内元素使用float后会变为行内块级元素
- 普通流中的块级元素“看不到”浮动后的元素,但是这个块级元素的子元素如果为行内元素,则这些行内元素会“看到”这个浮动元素,例如平时实现文字环绕就利用了这一特性(文字是匿名的行内元素)
- 浮动的框可以向左或者向右移动,直到它的外边缘碰到包含框(其父元素)或者另一个浮动框为止,这条属性也就意味着浮动元素可以像行内元素的样式一样水平排列,但如果高度设置存在问题,那么多个浮动元素水平排列会存在“卡住”的情况
清除浮动
利用clear属性
clear属性的作用是:要求该盒的top border边位于源文档中在此之前的元素形成的所有左(或右)浮动盒的bottom外边下方。
所以一般在需要清除浮动的元素后加上clear属性,更通用的方法是使用伪元素来清除浮动
.clearfix::after {
content:'';
display : block;
clear : both;
}
利用BFC
待续。。