三种盒模型

说到盒模型，其实在网上通常指的是css版本的标准盒模型和IE的IE标准盒模型，实际两者差距不大，只是在内容“content”的划分上不一样而已，即宽度计算上的差异；而我这里所说的第三种呢，是css3版本里的弹性盒模型，它是一个同等重要的概念，因为在互联网的发展里，APP将越来越有可能被网页打包的app所替代，那么网页适配不同屏幕、网页的响应式则非常需要弹性盒模型的特殊性！

两种标准盒模型

标准盒模型
IE标准盒模型

大家看两种模型的宽高计算，标准盒模型里宽高是不包含border边框和border内边距的，而IE盒模型的宽高却包括了。
相比较而言，两种盒模型对于内容的容器的友好程度是有区别的，标准盒模型的优点是设置了内边距（padding）和边框（border）后不会出现挤压内容的情况，可以用于垂直对齐的布局等，但是缺点也很明显，内边距和边框直接加在宽度上会影响容器外的布局，而程序员则必须对宽度进行再次计算或者事先计算好。
而对于IE盒模型来说优点也很明显，恰恰相反的是，IE盒模型可以先将布局处理完善后再添加内容，缺点则是一但内容过多或者有所变化的话盒子也需要再次更改大小，因为限制的宽高会挤压内容，让网页看起来非常难看!
在w3c的标准中，盒模型的差异被缩小成了一句属性：box-sizing,当值为border-box时，盒子为IE模型，为content-box时，为标准盒模型。但是因为网页的UI设计和网页布局也是分的很明确的，往后的项目一般会有一份明确布局的psd文件，所以大家也不用担心如何选择！

弹性盒模型

弹性盒子和标准盒子拥有一样的宽高边框和边距属性，不同的地方是：

当盒子设置pdisplay：flex或者inline-flex的时候，它的==子级==元素。
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。而显示方向则通过direction:right-to-left或direction:left-to-right属性来控制。
弹性盒模型的最大的优点是配合百分比的宽度、max-width的最大宽度等，使元素本身和子级能同时在浏览器宽度变化、显示屏幕宽度变化的情况下，自动的更改宽度以适应改变后的宽度，这也是响应式和移动H5的基础。
弹性盒模型的详细教程参考：

浮动

对于标准盒模型和IE盒模型来说，只需要在属性中加入float:left|right就可以了！产生的效果显而易见
大家看一下没有浮动效果时盒子的情况：

没有浮动时

浮动的时候盒子对本身和后面的元素的影响：

左边橙色盒子浮动脱离文档流，蓝色盒子占据原来的位置，因为我设置了透明度，为的是让效果的变化更加明显。

右边的盒子橙色盒子和蓝色盒子都浮动后排成一行，而红色盒子没有浮动占据文档前面的位置，注意盒子的位置和元素内容！！！
这里附上我的代码：

点击传送到上面的demo
这里是css样式：

*{
    margin: 0;
    padding: 0;
}
h2{
    margin-left: 50px;
}
.showbox {
    width: 500px;
    height: 500px;
    float: left;
    background-color: darkgray;
    margin: 50px;
}
.showbox:hover .floatbox{
    float: left;
}
.nofloatbox>p+p{
    display: none;
}
.showbox:hover .nofloatbox>p+p {
   display: block;
}
.showbox:hover .nofloatbox>p {
    display: none;
}
.nofloatbox {
    width: 200px;
    height: 200px;
    background-color: rgb(25, 170, 228);
}
.floatbox {
    width: 160px;
    height: 160px;
    background-color: rgb(255, 165, 0,0.5);
}
 .showbox2 {
     width: 500px;
     height: 800px;
     float: left;
     background-color: darkgray;
     margin: 50px;
 }
 .showbox2:hover .nofloatbox2{
     float:left;
 }
.showbox2:hover .floatbox2{
     float: left;
 }
 .nofloatbox2 {
     width: 200px;
     height: 200px;
     background-color: rgba(131, 207, 236, 0.8);;
 }
 .floatbox2 {
     width: 160px;
     height: 160px;
     background-color: rgb(255, 165, 0, 0.8);
 }
 .everfloat{
     width:250px;
     height:250px;
     background-color: red;
 }
.positiontemp{
    width:600px;
    height: 1000px;
    background-color: greenyellow;
    margin: 0 auto;
    clear: both;
}

这里是html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>对浮动和定位的展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h2>浮动与定位区别</h2>
    <h2 style="text-align: center">浮动</h2>
    <div class="showbox">
        <h3>hover这个灰色盒子时，橙色盒子浮动，注意看透明关系</h3>
        <div class="floatbox">
            <p>橙色盒子内容</p>
        </div>
        <div class="nofloatbox">
            <p>橙色盒子没浮动</p>
            <p>橙色盒子浮动了</p>
        </div>
        <p>橙色盒子浮动后，盒子容器脱离文档流，后面顺序的蓝色盒子容器占据橙色盒子位置，但盒子的内容却依然要和橙色盒子的内容竞争空间</p>
    </div>
    <div class="showbox2">
        <h3>hover这个灰色盒子时，两个盒子都浮动,注意看透明关系</h3>
        <div class="floatbox2">
            <p>橙色盒子内容</p>
        </div>
        <div class="nofloatbox2">
            <p>蓝色盒子内容</p>
        </div>
        <div class="everfloat">
            <p>这个红色盒子永远也不浮动</p>
        </div>
        <p>橙蓝两个盒子都浮动后的情况了解一下</p>
    </div>
</body>
</html>

清除浮动造成的麻烦

首先最明显也是一定会遇到的麻烦：父级塌陷！

比如子级的几个盒子使用了浮动，父级的高度便会塌陷下去：
如下图，我设置的蓝色边框盒子padding是10px
子级没有添加浮动时是这样的

设置了子元素的浮动后，高度塌陷！

清除浮动过后的效果：
那怎么清楚浮动呢？
1. 子级办法：元素添加clear:both|left|right解决其他元素的浮动影响；
2. 通过添加伪类before或after；
3. 通过添加属性overflow:hidden|auto;
4. 不建议方法的方法之一：加高，看起来没啥区别但是非常不好！
5. 不建议方法的方法之二：添加包含inline属性值的属性，如display:inline-block|inline;
  还要一些暴力方法是伤敌一千自损八百，麻烦，故不介绍！
可以参考BFC的详细解释和浅谈浮动和清除浮动所带来的影响;

三种盒模型、浮动和多种清除浮动的办法

三种盒模型

两种标准盒模型

弹性盒模型

浮动

清除浮动造成的麻烦

猜你喜欢