标准文档流
内容为从左到右，从上到下来排版的。前面的内容的大小会影响后面的内容，高低不齐，底边对齐
块级元素和行内元素
标准文档流讲html标签分成了块级标签和行内标签。
- 块级标签：所有的容器级标签都是块级标签。文本级标签里的p标签也是一个块级标签。例如：body,div,h系列,ul,ol,li,dl,dt,dd,table,tr,td等。
- 独占一行，同行不会出现其他的同级标签。
- 可以设置宽高。不设置的话，会自动继承上级的宽
- 行内标签：除了p标签之外的所有文本级标签。例如：a,span,img,input等。
- 行内标签不独占一行，可以与其他的行内元素并排在一行。
- 行内元素不能设置宽高，其他内边距，边框等可以正常设置。
块级元素和行内元素可以相互转换
这个属性为display：显示模式。
block：块级。
inline：行内（常用）。
inline-block：行内块。
三：浮动
float：浮动。分为left和right。可以让元素以某一方向并排排列，脱离标准文档流，既可以设置宽高又可以一行排列。
left：左浮动，从左到右依次贴左边布局
-
right： 右浮动，从右向左依次贴右边布局
* { margin: 0px; padding: 0px; } div { width: 50px; height: 50px; margin: 10px; background: green; float: left; }
浮动
-
当标签大小不一，且一行放不下时，会自动换行布局，并且去找临近的盒子去贴边，而不是直接去找最前边的。
截屏2020-03-0117.55.58.png 不会有margin塌陷的问题。
-
文字围效果
文字不像盒子背景部分一样，不会被浮动的元素遮盖住，文字会绕开浮动的元素进行排列。.content { width: 600px; height: auto; clear: left; } img { float: left; }
文字围效果
浮动存在的问题
- 浮动元素不能撑开父盒子
- 浮动会影响后面的元素
清除浮动
- 给父盒子设置高度。但是高度不能自适应了，有局限。
- 清除浮动属性clear
值为left，right，both。顾名思义，清除左或右，或者二者的影响。
clear：left；但是仍然不能撑开父盒子，有局限。 - 隔墙法
在相互影响的元素之间加一道墙，阻隔开两边的元素，这个墙添加清除属性。- 外墙法： 在有浮动元素的父盒子之间加一道墙。仍然不能解决自适应的问题。
- 内墙法： 将清除浮动的墙放在有浮动元素的父盒子内部的最后，只要有浮动，就在盒子内部加一堵墙。可以解决问题，但是会添加很多冗余的标签。
/*清除浮动*/
.cl {
clear: both;
}
<body>
<div class="line1">
<div class="green">1</div>
<div class="green">2</div>
<div class="green">3</div>
<div class="green">4</div>
<div class="cl"></div>
</div>
<div class="line2">
<div class="blue">1</div>
<div class="blue">2</div>
<div class="blue">3</div>
<div class="blue">4</div>
<div class="cl"></div>
</div>
<body>
浮动的影响
内墙法清除浮动
-
overflow：hidden
盒子内入的元素可以设置溢出模式，隐藏，自动显示。
属性值：hidden隐藏，auto溢出滚动
.line1 {
width: 600px;
background: red;
clear: left;
padding: 10px;
overflow: hidden;
}
.line2 {
width: 600px;
background: yellow;
clear: left;
padding: 10px;
overflow: hidden;
}
实际工作中，在大的结构中，通常加一个外墙来隔开，内部则使用overflow：hidden来清除浮动
