bfc和float注意点

野性酷女 2022-01-16 04:49 208阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

#### 伪类和伪元素不同: ####

- div:after   
     - a:hover

#### padding 和margin的布局 ####

- padding-top: 50%;  --二者都是以"父元素"的"宽度"为参照取百分比
    - padding-left: 50%;
    
    - margin-top: 30%;   -- 二者都是以"父元素"的"高度"为参照百分比
    - margin-left: 30%;

#### 清除浮动的原理: ####

- 普通文档流,
    - float属性的元素脱离了当前父元素的普通流,不能撑起父元素高度了,
        - .clearfix
    - 如果这时候设置了父元素为bfc,也可以撑起来,因为计算bfc高度的时候,浮动元素也参与计算
    - bfc的元素本身仍然在普通流中

##### BFC: #####

- 形成bfc的元素,其内部的"块级元素"会形成一个新的普通文档流,内部元素浮动不会影响外面的布局
    - 内部块级元素会占据一行,且子元素的"左外边距(margin-left)"紧贴着父元素的"左内间距(padding-left)"
    
    - float: 定义元素往哪个方向浮动
    	- 脱离了标准文档流,所以若其父元素已然形成bfc,要注意其兄弟元素是以块级元素排列,本身仍然要根据普通文档流的标准布局,
    	- 以往应用于图像,使文本"环绕"在图像周围
    	- 任何元素都可以浮动,浮动的元素会形成一个bfc,不论它本身是何种元素
    	- 对于浮动的内联元素,需要指明一个明确的宽度,否则,他们会尽可能的窄
    
    - *zoom:1 触发ie67的hasLayout闭合浮动

#### clearfix ####

-  这里最主要的是clear:both
    - clear：left 意思是： 如果“我自身”的左边元素是float：left的，那么我就到下一行去(因为块级元素要自己占一行）;如果它右边紧挨着一个float：right的，就需要clear：both了估计，要根据实际情况，所以一般都用：both
    - 
    ·
    .clearfix:{*zoom:1}
    .clearfix: after{
        content: '';
        clear: both;
        display: block;
        visibility: hidden;
       }
    ·

#### 哪些元素能够形成bfc ####

根元素
    float属性不为none
    position为absolute或fixed
    display为inline-block, table-cell, table-caption, flex, inline-flex
    overflow不为visible

转载于:https://my.oschina.net/boogoogle/blog/886958

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/c96be70d29464c66860333088a6b36ec.png