HTML5和CSS学习

网页布局方式
网页布局方式其实就是指浏览器是如何对网页中的元素进行排版的

1. 标准流(文档流/普通流)排版方式
   1.1 其实浏览器默认的排版方式就是标准流的排版方式
   1.2 在CSS中将元素分为三类，分别是块级元素/行内元素/行内块级元素
   1.3 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版。
   垂直排版，如果元素是块级元素，那么就会垂直排版
   水平排版，如果元素是行内元素/行内块级元素，那么就会水平排版
2. 浮动流排版方式
   2.1 浮动流是一种“半脱离标准流”的排版方式
   2.2 浮动流只有一种排版方式----水平排版，它只能设置某个元素左对齐或右对齐
   注意点：1.浮动流中没有居中对齐，也没有center这个取值
   2.在浮动流中是不可以使用margin:0 auto;的
   特点：
3. 在浮动流中不区分块级元素/行内元素/行内块级元素的，无论是块级元素/行内元素/行内块级元素都可以水平排版
4. 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
5. 综上所述，浮动流中的元素和标准流中的行内块级元素很像
   浮动元素脱标
   脱标：脱离标准流
   当一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标
   脱标之后的影响：如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素
   浮动元素排序规则
6. 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面
7. 不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
8. 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定
   浮动元素贴靠现象
   当父元素的宽度足够放下所有的元素的时候，就会并排显示，当不够时就会往贴靠的元素的前一个元素上贴，直到贴到父元素的边框上为止，这时候无论父元素的宽度够不够，都会显示
   浮动元素自围现象
   可以进行图文混排
   水平方向上有多个盒子，则首先考虑浮动流布局，处置方向上有多个盒子，则首先考虑标准流布局
   浮动元素高度问题
9. 在标准流中内容的高度可以撑起父元素的高度
10. 在浮动流中，浮动元素是不可以撑起父元素的高度的
    清除浮动方式一
    给前面一个父元素设置一个高度，这样就可以不让文字显示在一行。
    注意点：在企业开发中，能不写高度就不写高度，所以这种方式用的很少。
    清除浮动方式二
    给后面的盒子添加clear属性
    clear属性取值
    none:默认取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
    left:不要找前面的左浮动元素
    right: 不要找前面的右浮动元素
    both:不要找前面的左浮动元素，也不要找前面的右浮动元素（用得最多）
    注意点：但我们给元素添加clear属性后，这个元素的margin属性就会失效