浮动（float）

标准流：就是标签按照规定好默认方式排列

  1. 块级元素独占一行，从上向下顺序排列
  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
  • 一个标准的网页基本都包含这三种布局方式：标准流 浮动 定位

有很多的布局效果，标准流无法完成，比如把三个div放在一行，通过模式转化来做的话，他们之间会有空隙，而这个空隙有无法调整，所以需要利用浮动。因为浮动可以改变元素标签默认的排序方式。

网页布局第一准则：竖向排列用标准流，横向排列用浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一浮动框的边缘

语法
选择器{float：属性值;}

属性值 描述
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

浮动特性

重要：

  • 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
  • 浮动的盒子不再保留原先的位置
  • 如果多个盒子设置了浮动，浮动元素在一行内显示并且顶端对齐排列
  • 如果装不下，则会在下一行显示
  • 浮动元素具有行内块元素的特性
  • 如果块级盒子没有设置宽度，默认宽度和父亲一样宽，但是添加浮动后，它的大小由内容来决定

浮动元素经常搭配标准流的父元素

作用：可以先确定父元素摆放的位置，再在父元素的盒子里放浮动元素，可以约束浮动元素在页面中显示的位置

**Question！**这里遇到了一些问题，当使用无序列表来做侧边栏的时候，把小圆点取消了，但是它还占着位置

**A！**发现了bug，原来是没有清除内外边距导致的

网页布局第二准则：先设置盒子的大小，之后设置盒子的位置

注意点：

  1. 浮动和标准流的父盒子搭配
  2. 一个元素浮动了，理论上其余的兄弟元素也要浮动
  3. 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

因为父盒子很多情况下不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

清除浮动后，父级盒子高度就能由子级盒子决定，父级有了高度就不会影响下面的标准流了

语法

选择器{clear：属性值;}

属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右浮动的影响

额外标签法

在浮动元素末尾加上一个空标签（块级元素)，然后给这个标签清除浮动（关门）

父级添加 overflow

注意：是给父元素添加overflow:hidden;

属性值为：hidden、auto、scroll

:after 伪元素法

添加一串代码

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
.clearfix {
            /* 用来兼容低版本浏览器 */
            *zoom: 1;
        }

相当于额外标签法的升级版，这个是通过css在末尾生成了一个盒子，在末尾加墙

也可以通过选择器：before{}给盒子前面添加元素，在开头加墙