【CSS笔记】浮动

1.定位方式

首先CSS中有以下五种定位方式：

1. 文档流定位：默认的定位方式，块级元素从上到下排列，行内元素从左到右排列。
2. 浮动定位：设置float:left/right，该定位方式会导致元素脱离文档流。
3. 相对定位：相对元素原来的位置偏移，原本的空间会被保留。
4. 绝对定位：脱离文档流，不占据页面空间。
5. 固定定位：将元素固定在某个位置，不随着滚动条而发生位置变化。

2.浮动的特点

引用大佬的总结，浮动有四个特点：

1. 脱标：脱离文档流。正常的div会像上图那样从上往下排列，如果设置了黄色方框向左浮动，那么它就会脱离文档流，不再占据空间，另外的红色和绿色方框就会往上移动，红色方框被黄色方框遮挡。
   
2. 贴边：浮动的元素会向左/向右移动，直到碰到边缘。
3. 字围：如果红色方框中有文字，就会围着黄色方框排开。
4. 收缩：正常来说，div元素会独占一行，但如果设置了浮动后，div的宽度不再占满，而是收紧为内部元素的宽度。

3.浮动的缺点

从浮动的特点1可以看出，由于浮动会脱离文档流，不占据页面空间，如果父元素高度由子元素撑开，那子元素都设置了浮动，则父元素的高度就会变为0，导致高度塌陷。如图，黑色是父元素的边框，此时因为子元素都设置了浮动，父元素并没有被子元素的高度撑开，因此在某些情况下需要清除浮动带来的影响。

4.清除浮动

1. 父容器设定高度。但是固定了父元素高度会导致扩展性变差。
2. 在最后一个所有子元素后增加一个额外的div，设置clear:both，但会增加冗余元素，代码不好看。
3. 使用伪元素。实际上也是用到clear:both，但不会产生额外的元素。在最后的浮动元素后如下操作：

.clearfix:after {
        content: '';
        display: block;
        clear: both;
        height:0;
        line-height:0;
        visibility:hidden;//允许浏览器渲染它，但是不显示出来
      }

4. 父元素设置overflow:hidden，使其成为一个BFC（块级格式上下文），这也是最常用的方法。但如果有元素超出父元素，就会把多余的部分裁掉，因此也具备局限性。另外，BFC还可以接触垂直边距折叠问题，触发条件如下：

• float 为 left | right
• overflow 为 hidden | auto | scorll
• display 为 table-cell | table-caption | inline-block
• position 为 absolute | fixed

5. br标签清除浮动。使用br标签的clear属性。<br clear="all"/>