标准文档流.浮动以及清除浮动(学习笔记)
标准文档流
1.当后面空间不够时,会空白折叠,自动换行.
2.当高矮不齐时,会底部对齐.
3.自动换行.
标签根据显示的内容划分成:文本级,容器级.
按照文档流划分:块级元素.行内元素;
块级元素:
(1).霸占一行,不能与其他任何元素并列.
(2)能接受宽高.
(3).如果不设置宽度,那么宽度将默认变为父亲的100%.
行内元素:
(1).与其他行内元素并排;
(2)不能设置宽高.默认宽度就是文字宽度.
所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。
块级元素和行内元素的互相转换.
属性:display
值:inline:块级元素转换为行内元素;
block:行内元素转换为块级元素;
css中一共有三中手段,使一个元素脱离标准文档流;
(1).浮动;
(2).绝对定位;
(3).固定定位;
浮动:float;
分为:左浮动和右浮动;
(1).浮动会使元素脱离标准文档流;
(2).浮动元素互相贴靠;
(3).浮动的元素有”字围”效果;(浮动能挡住标签挡不住内容;)字围指汉字:
(4).收缩;(对于一个浮动的元素没给宽高,将要收缩到内容的宽度;)
注意:永远不是一个浮动,浮动都是一起浮动,要浮动大家都浮动;
如果浮动在块级元素的下边,不会占用块级元素的空间;
清除浮动
1.想清除浮动可以给浮动元素的祖先元素加高度;(给前一个的祖先加高度);
2.用属性clear:both;
clear就是清除,both指的是左浮动,右浮动都要清除.(是清除其他浮动对我的影响)
3.隔墙法;(方法2和3混合用);
<div>
<p></p>
<p></p>
<p></p>
</div>
<div class="cl h10"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
衍生出了:内墙法:
<div>
<p></p>
<p></p>
<p></p>
<div class="cl h10"></div>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
注意:脱标的元素是不能把父元素撑出高度的;
非浮动元素撑出了父元素的高度;
4.overflow:hidden:本意是将所有溢出盒子的内容,隐藏掉;
能够撑出父容器的高度;
