CSS学习笔记（网页布局~伪元素清除浮动）

文字界面
1.清空所有边距
2.从外向内布局，从上到下布局
3.用span修改局部界面

伪元素选择器
找到元素，在该元素的前面或者后面添加一个子元素。

.head::before{
            属性：值;
        }
.head::after{
            属性：值;
        }

.head::before{
            content: "爱你";
            height: 20px;
            width: 100px;
            display: inline-block;/*设置block或者inline-block才可以修改宽高*/
            background-color: green;
            visibility: hidden;/*将添加的元素隐藏起来*/
        }

网页的布局方式
指浏览器是如何对网页中的元素进行排版
先分块，在从外到内，从上到下。
1.标准流（文档流/普通流）排版方式

1.1浏览器默认的排版方式
1.2元素是块级元素就会垂直排版，元素是行内元素、行内块级元素就会水平排版

2.浮动流排版方式
2.1是一种半脱离标准流的排版方式
2.2浮动流排版只有水平排版方式，它只能设置某个元素左对齐或者右对齐。
2.3 float:left/right/none/inherit(继承父元素的float属性);
float: left;和父元素的左边对齐
注意
1.在浮动流里没有居中对齐，margin: 0 auto;在浮动流里无效。
2.在浮动流中是不区分块级元素/行内元素/行内块级元素，它们都可以显示在同一行，进行水平排版。
3.在浮动流中，块级元素/行内元素/行内块级元素都可以设置宽高。

2.4浮动元素脱标
1.脱标:脱离标准流
当某一元素浮动之后，那么这个元素看上去就像被从标准流中删除一样，它之后的元素就会跑到它所处的位置。
2.如果前面的元素浮动了，后面的元素没有浮动，那么前面的元素就会盖住后面的元素。float: left; 时

2.5浮动元素的排序规则
1.相同方向上（左右）的浮动，先浮动的元素会显示在前面，后浮动的元素会显示在后面。（浮动的元素不会盖住浮动的元素，只会盖住标准流的元素）
2.不同方向上（左右）的浮动，左浮动会找左浮动，右浮动会找右浮动。
3.浮动元素浮动之后的位置，由浮动元素之前在标准流中的位置来确定。（浮动之前在第几行，浮动之后就在第几行，浮动之前的第几行是指如果前面有浮动元素，该元素在标准流里补位的位置）

2.6浮动元素的贴靠现象
元素浮动之后的宽度如果超过父元素的宽度时，超出宽度的那些元素会自动找前一个元素去贴在它旁边，如果还不够，就会继续找前面的前面的元素······只到那些元素不超过父元素。贴靠到父元素是如果还不够，也只能贴靠到父元素了。

2.7浮动元素的字围现象
给前面的元素设置浮动后，后面的文字不会盖住浮动元素，而是会围在前面的那个元素的周围，常用来做网页中的图文混排。

2.8浮动元素高度问题
在标准流中，内容的高度可以撑起父元素的高度
在浮动流中，内容的高度不能撑起父元素的高度

2.9清除浮动
2.9.1.给父元素设置高度
因为在浮动流中，内容的高度不能撑起父元素的高度，所以要给父元素设置高度。
但是在企业开发中能不写高度就不写高度，所以这种方式尽量不要用。
2.9.2.clear: none/left/right/both;
clear: none;两边都允许浮动
clear: left;不去找前面左边浮动的元素（左边不允许浮动）
clear: both;不去找前面左、右浮动的元素（两边都不允许浮动）
注意
在设置了clear属性之后，这个元素的margin属性就会失效。
原因：因为此时的margin-top相当于是和父元素的外边距，如果没有边框属性，该元素和父元素都会被顶下来。
2.9.3.隔墙法
1.外墙法
在两个盒子中间添加一个额外的块级元素，并且给这个额外的盒子添加clear: both;属性
注意
外墙法可以让第2个盒子设置margin-top属性，但不能让第1个盒子设置margin-bottom属性。
所以直接给额外的盒子设置宽高即可。

.wall{
            clear: both;
        }
.h20{
            height: 50px;
        }

<div class="head">
    <div class="l1"></div>
    <div class="l2"></div>
</div>
<div class="wall .h20"></div>
<div class="content">
    <div class="l4"></div>
    <div class="l9"></div>

2.内墙法
在第一个盒子所有子元素的最后加个墙
注意
外墙法可以让第2个盒子设置margin-top属性，也可以让第1个盒子设置margin-bottom属性，也可以给额外的盒子添加高度来实现两个盒子之间的隔开。

<div class="head">
    <div class="l1"></div>
    <div class="l2"></div>
<div class="wall h20  p20"></div>
</div>
<div class="wall h20"></div>
<div class="content">
    <div class="l4"></div>
    <div class="l9"></div>
</div>

外墙法不能撑起第1个盒子的高度，内墙法可以撑起第1个盒子的高度。
不常用隔墙法，因为要多占一个盒子。
2.9.4伪元素元素清除浮动
给第1个盒子添加伪元素，推荐

.head::after{
            content: "";/*内容为空*/
            display: block;
            height: 0;
            visibility: hidden;/*隐藏起来*/
            clear: both;/*设置clear属性*/
        }

过去的浏览器不支持

.head{
            *zoom:1;/*写上这句话可以让它在过去的浏览器里也能使用*/
        }

3.定位流排版方式