饥人谷技术博客

CSS布局模型（Float、BFC）

2017-07-12  本文已影响135人  _空空

CSS布局模型

流动模型（Flow）

浮动模型（Float）

float: left | right | none（默认） | inherit;
// 应用于所有元素。无继承性

// 实例1：
<body>
<div style="border: solid 5px #0e0; width: 250px;">
    <div style="height: 120px; width: 100px; background-color: Red;  float: left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;  float: left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Yellow;  float: left;">
    </div>
</div>
</body>


// 实例2：
<body>
<div style="border: solid 5px #0e0; width:300px;">
    <div style="boder: 1px solid lightcoral;">
        <div style="height: 50px; width: 100px; background-color: Red;  float: left;">1</div>
        <div style="height: 100px; background-color: Green;  float: left;">2df空间空间就开发邓金快乐就啊风口浪尖分快乐就快乐发邓金快乐就浮动是快乐就快乐就放假啊看路径及看风景的快乐地方就是快乐就放假卡拉斯京访问空间看了大煞风景空间快乐</div>
    </div>
    <div style=" background-color: Yellow;  ">3<br>dfff<br>dfff<br>dfff<br>dfff<br>dfff</div>
</div>
</body>

浮动元素的特征、影响

内边界:指盒模型中的 content 边界。外边界：指盒模型中的 margin 边界。

    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }

    .box{
        width: 200px;
        height: 200px;
        margin: 50px;
        background-color: grey;
    }

    .box span{
        background-color: lightsalmon;
    }

    .box1{
        float: left;
        width: 300px;
        height: 100px;
        margin: -10px 0;
        background-color: lightblue;
    }

    .box2{
        background-color: lightgreen;
    }
    </style>
</head>
<body>
<div class="box">
    <span>行内元素行内元素行内元素行内元素行内元素行内元素</span>
    <div class="box1">浮动元素</div>
    <div class="box2">块状元素块状元素块状元素块状元素</div>
</div>
</body>

行框

<body>
<div style="border: solid 5px #0e0; width: 250px;">
    <div style="height: 50px; width: 50px; background-color: Red; float: left;"></div>
    <div style="height: 100px; width: 100px; background-color: Green;">
        abc def ghi
        abc def ghi
        abc def ghi
    </div>
</div>
</body>

<body>
<div style="border: solid 5px #0e0; width: 250px;">
    <div style="height: 50px; width: 50px; background-color: Red; float: left;"></div>
    <div style="height: 100px; width: 100px; background-color: Green; clear:both;">
        11111111111
        11111111111
    </div>
</div>
</body>

清除浮动指什么? 如何清除浮动?

// clear：指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动（清除浮动）在它的下面
clear：left | right | both | none（默认） | inherit
// 可设置的属性值包括：left（在左侧不允许浮动元素）、right（在右侧不允许浮动元素）、both（在左右两侧均不允许浮动元素）、none（默认值。允许浮动元素出现在两侧）、inherit
// 应用于：块级元素（块级元素指 block元素，不包括 inline-block元素）。无继承性
// 注意：设置clear属性的元素并不能改变浮动元素，而只能改变自身
// CSS2.1引入了一个清除区域，清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围，这意味着元素设置 clear 属性时，它的外边距不改变
/*
clear 属性适用于浮动和非浮动元素

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。
这个行为作用时会导致 margin collapsing 不起作用

当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。
这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素
*/


// 在所有浏览器中都兼容的清浮动方案如下：
/* 方法1 */
.clearfix { 
    *zoom: 1; /* IE7-浏览器：触发包含块的 haslayout */
}    
.clearfix:after{ 
    content:""; 
    display: block; 
    clear: both; 
}


/* 方法2 */
/* 我们知道：触发 BFC 可以让包含块包含浮动元素，进而达到清除浮动的效果 */
.clearfix{
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: table; /* 匿名的表格单元，它是可以触发 BFC 的 */
    clear: both;
}

// 更进一步：
/*
.clearfix:before 对于清除浮动是没什么必要性，但是它可以防止浏览器顶部空白崩溃
也就是说，margin-top 和上一个盒子的 margin-bottom，它们两个会发生叠加，
通过设置 .clearfix:before 可以防止这个叠加
*/
.clearfix:before,
.clearfix:after {
    content: "";
    display: table; 
}
.clearfix:after {
    clear: both;
}

BFC（块级格式化上下文）

作用

形成条件

<body>
<div style="border: solid 5px #0e0; width: 300px; overflow: hidden;">
    <div style="height: 100px; width: 100px; background-color: Red;  float: left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;  float: left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Yellow;  float: left;">
    </div>
</div>
</body>

局限性

haslayout 详解（IE7-浏览器）

【1】html,body
【2】table,tr,th,td
【3】img
【4】hr
【5】input,button,select,textarea,fieldset
【6】frameset,frame,iframe

【1】display: inline-block
【2】height/width: 除了auto
【3】float: left/right
【4】position: absolute
【5】writing-mode(IE专有属性，设置文本的垂直显示): tb-rl
【6】zoom(IE专有属性，设置或检索对象的缩放比例): 除了normal外的任意值
【7】width: 除 “auto” 外的任意值
【8】height: 除 “auto” 外的任意值

【1】min-height/max-height/min-width/max-width: 除了none外的任意值
【2】overflow\overflow-x\overflow-y: 除了visible外的任意值
【3】position: fixed

层模型（Layer）

上一篇下一篇

猜你喜欢

热点阅读