float学习笔记

float特性

• 任何元素都可以使用float属性，行内元素使用float后会变为行内块级元素
• 普通流中的块级元素“看不到”浮动后的元素，但是这个块级元素的子元素如果为行内元素，则这些行内元素会“看到”这个浮动元素，例如平时实现文字环绕就利用了这一特性（文字是匿名的行内元素）
• 浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框（其父元素）或者另一个浮动框为止，这条属性也就意味着浮动元素可以像行内元素的样式一样水平排列，但如果高度设置存在问题，那么多个浮动元素水平排列会存在“卡住”的情况

清除浮动

利用clear属性

clear属性的作用是：要求该盒的top border边位于源文档中在此之前的元素形成的所有左(或右)浮动盒的bottom外边下方。

所以一般在需要清除浮动的元素后加上clear属性，更通用的方法是使用伪元素来清除浮动

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

利用BFC

待续。。