DAY 10

CSS传统网页布局

网页布局的本质-----就是用CSS来摆放盒子，把盒子放到相应的位置。 CSS提供了三种传统布局方式来摆放盒子：普通流（标准流）、浮动和定位。在实际开发中，一个网页基本包含了这三种布局方式。

本篇笔记先介绍普通流和浮动。

普通流（标准流/文档流）

最基本的布局方式，初学者最先接触到的就是标准流布局。

块级元素独占一行，从上往下顺序排列。

常用元素：div、p、h1~h6、ul、ol、dl、table

行内元素按照顺序，从左到右排列，遇到父元素边缘则自动换行。

常用元素：span、a、i、em、strong、b等。

浮动（重点）

为什么需要浮动？

有很多的布局方式，比如让多个块级盒子并排一行，或者让两个盒子分别置于两边左右对齐，标准流很难或者没法完成，就可以采用浮动的方式，改变元素标签默认的排列方式。

什么是浮动？

当一个元素被设置为浮动元素之后，会有以下重要特性：

脱离标准流
让多个块级盒子在一行内显示并且元素顶部对齐
具有行内块元素的特性：当元素被定义为浮动显示时，它会自动成为一个块状元素，相当于定义了“display:block;”。但是块级元素会自动伸张宽度，占据一行位置，且块级元素会附加换行符，所以在同一行内只能显示一个块级元素。而浮动元素虽然拥有块级元素的特性，但是它并没有上述表现，这时它更像行内元素那样收缩显示。

浮动元素的影响

当一个元素被设置为浮动元素之后，元素本身的属性会发生一些改变：

空间的改变

当网页中一个元素被设置为浮动元素，该元素就会自动收缩为自身体积为最小的状态。如果该元素设置了高度或宽度，就按设置的高宽度进行显示；如果该元素包含了其他对象，则元素体积自动收缩为仅能容纳所包含的对象大小；如果没有设置高宽度或包含任何对象，则会缩小为一个点，甚至不可见。

位置的改变

当网页中一个元素被设置为浮动元素，会自动地向左或向右浮动直到碰到其父级元素的边缘，或者碰到相邻浮动元素的边缘才会停止浮动。

布局环绕

当元素浮动后，不再保留原先的位置，它原来所处的位置就会被下面的非浮动对象上移填充掉。若下面的非浮动元素没有设置宽高度，但里面有文字，则文字会环绕浮动元素。块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样。

清除浮动

准确地说，并不是清除浮动，而是清除浮动后造成的影响。

元素浮动以后，其所在的位置会被下方不浮动的元素填充掉，而有些时候这样的填充会破坏页面布局，clear元素可以解决这个问题。在不浮动元素中添加与浮动元素float属性值相同的clear属性值，会使不浮动元素显示在浮动元素的下边距边界之下。

浮动元素也可以添加clear属性，添加的clear属性的属性值只有和float属性的属性值相同时才能起作用，即当元素向左浮动时只能清除元素的左浮动，而不能将属性值设为清除右浮动。

清除浮动本质：清除浮动的本质是清除浮动元素造成的影响。主要为了解决没有设置高度的父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

屏幕截图 2023-05-10 160239.jpg

屏幕截图 2023-05-10 160440.jpg 语法：

选择器{clear:属性值;}

clear有以下属性值：

left：不允许元素向左浮动
right：不允许元素向右浮动
both：同时清除左右两侧的浮动的影响

在实际工作中，几乎只用clear:both

清除浮动的方法

额外标签法

额外标签法也称为隔墙法，是W3C(万维网联盟）推荐的做法。额外标签法会在浮动元素末尾添加一个空标签，在该空标签设置“clear:both”。

 <div class="fa">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div style="clear: both;"></div>//在这里清除浮动子盒子son1、son2、son3带来的浮动影响
 </div>

优点：通俗易懂，容易掌握

缺点：增加许多无意义的空标签，违背结构与表现分离原则，不利于后期维护

父级添加overflow

给父级添加overflow，将该属性值设置为hidden、auto或scroll。

.father{
       overflow: auto;
       overflow:hidden;//跟auto等效
       overflow:scroll;//父级盒子会出现滚动条
   }

优点：代码简洁

缺点：无法显示溢出的部分。

:after伪元素法

:after是额外标签法的升级版，不过这个是给父元素添加，指在父元素之后插入内容：

.father:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
  
    /* IE6、7 专有 */
    .father {
        *zoom: 1;
    }

优点：使用了闭合浮动（使浮动元素闭合,从而减少浮动带来的影响,简而言之就是使包含框表现出正常的高度），比清除浮动更严谨。结构和语义化完全正确。

缺点：复用方式不当会造成代码量增加。由于IE6-7不支持:after，会出现兼容性问题.

双伪元素法

比伪元素法多加了一个:before选择器，也是给父元素添加。指父元素前后插入内容：

.father:before,.father:after {
        content: "";
        display: table;
 }
 
 .father:after{
         clear: both;
   }
   
  .father {
        *zoom: 1;
   }

优点：同上方法。