浮动

浮动

• 浮动有三个值，none不浮动，left左浮动，right右浮动

.two {
           width: 100px;
            height: 150px;
            background-color: aquamarine;
            /* 左浮动 */
            float: left;
        }

• 浮动后元素本身脱离文档流，原来的位置被其他元素所占据
• 浮动后，在同一个父元素中，目标元素会占据一个浮动后位置
• 注意：浮动只能是子元素在父容器中进行位置移动，如果父容器剩余宽度不能容纳另一个子元素，那么就换行,元素的浮动范围是父容器
• 同一位置多个元素，具有浮动属性的元素，层级高于不浮动属性的元素

总结：浮动规律：1：找到元素在布局流中的起始位置，2：沿自身水平方向进行浮动，如果水平方向不够，那么就自动换到下一行

• 如果没有给父元素设置高度会出现什么问题
  父元素没有设置固定高度，那么父元素高度由子元素撑起来
  如果所有子元素都脱离文档流，那么父元素就没有高度了
  只有不脱离文档流的元素才能撑起父元素的高度

解决浮动问题：
1：给父元素设置一个高度
2：在最后一个浮动元素下面新加一个元素，清除浮动
3：伪元素清除浮动，给父元素添加伪元素
例如：

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