CSS 浮动和定位（new）

一、CSS浮动

1、网页布局排版

标准流排版

• 块级元素垂直排版；
• 行内和行内块级是水平排版；

浮动流排版

• 是一种 半脱离标准流 的排版方式；
• 浮动流只有水平排版，设置相对于父级元素的左对齐或者右对齐，没有 center，不可以使用 margin：0 auto；
• 浮动流不区分块级和行内元素，更类似于行内块级元素的特点，即可水平排版又可以设置宽高；

定位流排版

2、浮动（float）

浮动元素脱标

• 定义：浮动的元素脱离标准流，像是从标准流里被删除了一样；
• 影响：会造成元素的覆盖问题；

浮动元素排列

• 相同方向，先浮动的在前；
• 不同方向，左浮找左，右浮找右；
• 元素浮动后的位置与浮动前的位置相关：浮动前在第几行浮动后就在第几行，这里的浮动前的位置是在前面的元素都浮动之后的位置；

浮动贴靠和字围现象

• 贴靠：当同一方向上的浮动元素超过父元素的宽度时，浮动元素会自动与上一元素贴靠在同一个元素上
  
• 字围：当存在两个元素，一个元素为浮动元素，而另一个元素为标准元素时，标准元素中的内容会自动围绕在浮动元素四周
  

1.网页排版：垂直方向标准流，水平方向浮动流；

---

二、清除浮动

为什么要清除浮动

• 浮动的元素会脱离标准的文档流，会带来诸如父容器的高度塌陷，元素覆盖等问题

浮动清除说明基于下面的环境

• html

<div id="box1">
    <p>123</