标准文档流.浮动以及清除浮动(学习笔记)

时间:2022-03-30 05:36:20
标准文档流
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:本意是将所有溢出盒子的内容,隐藏掉;
        能够撑出父容器的高度;