CSS盒模型之文档流与BFC

  categories:资料  author:

文档流:文档中可显示的元素在排列时候的开始位置以及他们所占的区域

原因:页面元素不同,按照各自的特点去显示,在页面中所占的区域是不一样的
顺序:从上到下,从左到右

css浮动float

概念:使元素脱离文档流,按照指定的方向发生移动,遇到父级元素或者相邻的元素就会停下来

特征:1)块元素可以在一行显示

2)按照一个方向移动

3)行内元素支持宽高

4)脱离文档流(元素不在页面中占位置了)

注意:浮动后跟的元素(没有浮动)的位置是从前面浮动的元素位置开始的

非浮动元素里的内容会留出前面浮动元素的位置(盒模型位置)

5)块元素的默认宽度(默认撑满一行)会改变(由内容撑开,也可以设置宽)

代码

1 .container div {
2         width: 100px;
3         height: 100px;
4         background: green;
5         float: left;
6     }
<div class='container'>
        <div></div>
        <span>浮动后跟的元素(没有浮动)的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置(盒模型位置)
浮动后跟的元素(没有浮动)的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置(盒模型位置)浮动后跟的元素(没有浮动)的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置(盒模型位置)浮动后跟的元素(没有浮动)的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置(盒模型位置)浮动后跟的元素(没有浮动)的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置(盒模型位置)浮动后跟的元素(没有浮动)的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置(盒模型位置)浮动后跟的元素(没有浮动)的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置(盒模型位置)
                    
</span>

结果:

6)父级高度塌陷(破坏性),子元素如果有浮动,父级高度不会自动撑开了

//css代码
.container {
        border:2px solid red;
    }
    .container div {
        width: 100px;
        height: 100px;
        /*float: left;*/
        background: green;
       }
    //html代码
    <div class='container'>
        <div></div>
    </div>

清除浮动

1) clear 元素的某个方向上不能有浮动元素

clear :left  元素的左边不能有浮动元素

right  元素的右边不能有浮动元素

both 元素的两边不能有浮动元素 (常用)

2)overflow:hidden

如果子级有定位(position)并且超出了父级的范围这样子级定位的内容就开不见了,就不能有这样命令了

3)空标签

空标签是没有内容的,但他用于清楚浮动,不符合行为、结构、样式相分离

<div class='container'>
        <div class='box'></div>
        <div style='clear:both;'></div>
    </div>

4)after伪类清除浮动,是目前主流方法

after   代表选择到的元素的内容的最后面(默认添加的内容是行内元素),配合content使用

content  设置的内容

CSS代码

  .container {
        border: 2px solid red;
    }

    .container .box {
        width: 100px;
        height: 100px;
        float: left;
        background: green;
    }

    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }

HTML代码

<div class='container clearfix'>
        <div class='box '></div>
 </div>

执行结果

BFC   Block Formatting Contexts  块级元素格式化上下文

决定了块级元素如何对它的内容进行布局,及与其他元素的关系与相互作用

关键词解释:块级元素:指的是父级(块级元素)

内容:子元素(块级元素)

其他元素:与内容级别的兄弟元素

相互作用:BFC里的元素与外面的元素不会发生影响

普通文档流的布局规则
1:浮动的元素不会被父级计算高度(父级高度塌陷)
2:非浮动元素会覆盖浮动元素的位置
3:margin会传递给父级
4:2个相邻的元素上下元素会重叠

BFC的布局规则
1:浮动的元素会被父级计算高度( 父级触发了BFC)
2: 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
3:margin不会传递给父级(父级触发了BFC)
4:两个相邻的元素上下margin不会重叠(给其中一个元素添加一个单独的父级,然后让他的父级触发BFC)

触发BFC的方式(以下任意一条就可以)
1:float的值不为null
2:overflow的值不为visible
3:display的值为table-cell,table-caption,inline-block
4:position的值不为static,relative

 举几个栗子:

1:自适应两栏布局:

代码

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

页面显示:

注意:非浮动元素会覆盖浮动元素的位置,就是主区和左栏开始位置重叠了,解决办法,让非浮动元素触发BEC

.main {
    overflow: hidden;
}

触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块(父级)的宽度,和aside的宽度,自动变窄。效果如下

2:清除内部浮动

 1 <style>
 2     .par {
 3         border: 5px solid #fcc;
 4         width: 300px;
 5     }
 6  
 7     .child {
 8         border: 5px solid #f66;
 9         width:100px;
10         height: 100px;
11         float: left;
12     }
13 </style>
14 <body>
15     <div class="par">
16         <div class="child"></div>
17         <div class="child"></div>
18     </div>
19 </body>

页面效果:

为达到清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算

1 .par {
2     overflow: hidden;
3 }

3:防止页面margin重叠问题

 1 <style>
 2     p {
 3         color: #f55;
 4         background: #fcc;
 5         width: 200px;
 6         line-height: 100px;
 7         text-align:center;
 8         margin: 100px;
 9     }
10 </style>
11 <body>
12     <p>Haha</p>
13     <p>Hehe</p>
14 </body>

页面显示:

margin重叠问题造成了两个P之间的上下距离还是100
我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。
代码:

1 <p>Haha</p>
2     <div style='overflow:hidden;'>
3         <p>Hehe</p>
4     </div

页面显示:

 来源:https://www.cnblogs.com/xubj/p/9966460.html



快乐成长 每天进步一点点      京ICP备18032580号-1