HTML学习笔记 - 脱离标准流 清除浮动 页面布局

一 标准文档流

说白了，就是一个“默认”状态（由上往下），标准流中，标签分为两种：块级元素，行内元素

标准流的现象

1. 空白折叠现象
2. 高矮不齐，底边对齐
3. 自动换行，一行写满，自动换行

4. margin 塌陷（只在标准流中才会有）

   
   
   

   41A27C36-E4DA-4E10-8C03-067D5F1EB92F.png

1.1 块级元素，行内元素

块级元素：一定是霸占一行的，能设置宽高，不设置宽高默认占满父亲；div,p,h
行内元素：和其他元素并排，不能设置宽高，默认宽高就是文字的高度。span ,a,b,i,u

3DDDEC3F-135C-44ED-92CE-98EBE483E57A.png

（1）区分块级与行内

1. 文本级：p，span，b,a,i,u,em
2. 容器级：div，h，li，dd，dt，
   在CSS中所有的文本级的标签，都是行内元素
   所有的容器级的标签都是块级元素

(2) 块级与行内相互转换

1. display：block；转变块级
   例子：将a标签专成块级，变成块级后可以设置宽高，独自占一行

   
   
   

   4D055B4D-161E-4F89-B554-457E4B933E81.png

2. display: inline; 转变为行内
   例子：将div转为行内标签

   
   
   

   0B84FA8E-84AC-4885-93B1-DF169EA2F4BA.png

标准流做不出网页，因为能并排不能改变宽高，所以要脱离标流，

只有脱离标注流才能达到下面的布局

A464C34C-90F9-4D4D-A7AC-4EBE52D79916.png

1. 浮动

float：left

例子：

BD62D81A-69A7-4A4F-BD16-2AB94F4C5DAF.png

脱离标注流现象

实现两个块级元素div显示在同一行，同时还能设置宽高，浮动之后脱离了标准流现象

5C25D3F7-4C41-4FC4-992F-D2786DF3063C.png

绿色的的盒子设置 float：left，蓝色不设置脱离了标准流，序号为2的盒子在标准流中酒变成了第一个

7F79BDA2-91F9-460B-84B0-30D9ABE53264.png

注意:一旦一个盒子脱离了标准流之后，就能设置宽高了，无论是块级元素还是行内元素，也就是是说行内元素在不转换成块级的情况下也能设置宽高

浮动元素互相贴靠现象

123，都设置为浮动后，缩小窗口可以看到布局会发生变化

F22C4898-59FB-4726-9A67-C6D12D87EA1B.png

浮动的字围现象

浮动能挡住盒子但是挡不住文字
例如：一个浮动div和一个p标签，p标签的盒子会插入到div的下面，但是p标签里面文字不会被挡住

EC1075B2-7C3E-4824-95D9-8F21877D4F1F.png

2. 浮动清除

如果一个元素要浮动，那么它的祖先的元素一定要有高度
有高度的盒子才能关住浮动
例如：
现在有两个div ，div里面有两个ul（不是浮动），li都是浮动的

4BDB6EC9-AC5E-4BD2-9CB0-EEDC2C005480.png

841D6DD0-3198-4AA6-A1C5-1E581F0C1AB0.png

本以为这两个li会分两排的但是：

0B47AFFD-310E-4A92-AE19-F41A200370C9.png

原因： div没有高度，不能给自己浮动的孩子一个容器，撑不起这个高，
所以： 如果一个元素要浮动，那么它的祖先的元素一定要有高度
有高度的盒子才能关住浮动

解决方法：清除浮动

1.手动设置高度
2. 最简单的清除浮动的方法，就是给盒子增加Clear：both；表示自己的内部元素，不受盒子的影响，

82610B2F-7D06-42B6-BA7B-44D03C3019A7.png

但是两个盒子间的marg失效
3.外墙法 ：在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素不去追前面的浮动元素，用自己的身体当作了间隙

8482A926-AE74-415B-802A-01395CCF9E0F.png

能清除儿子浮动的影响，但是第一个div还是不会有
4.内墙法
一个父亲如果不能被自己浮动的儿子撑出高度，在里面修一堵墙，就能被撑出高度

C551E216-CAB6-42E1-A3FA-1E4870A5AA2A.png

这种方法，div就能被自己里面浮动p撑出高度
5.设置overflow：hide；本意是清除溢出到盒子外面的文字，但是前端工程师发现了他的偏方
一个父亲如果不能被自己浮动的儿子撑出高度，但是，只要父亲这只了这个属性那么父亲就能被撑出高度，（父亲会自动适配内容的高度）

699652B2-AE50-46BC-A925-15EA81689C9A.png

3. 绝对
4. 固定位置