学习布局（四）浮动的影响

文档流：

普通流，也可以称之为常规流、文档流。

        普通流式文档中可显示对象在排列时所占用的位置。可以将整个网页看做一个文档，这个文档自上而下分成一行一行，并在每行中按照从左至右，依次排放元素。

脱离文档流：

     设置浮动的元素会脱离文档流，浮动的元素，并不属于文档中的普通流，如果包含框内部不存在其他普通流元素，也就是产生高度为0的现象（高度塌陷），如果有其他普通元素，依旧会受到浮动元素影响。

浮动高度如何计算：

     在默认情况下，一个元素的内容大小决定一个元素的高度，当一个块元素如div 设定了高度，那么在主流浏览器中，这个元素的高度不再由内容大小决定，而是由设置的高度值决定。

    设置父级固定高度.
          浏览器默认内容超出父级的时候依旧显示，因此内容超出父元素的部分默认情况下不会被隐藏。

 

        .wrap {
            border: 10px solid #000000;
            height: 200px;
        }

        .con {
            height: 200px;
            background-color: aqua;
        }

        .con2 {
            height: 100px;
            background-color: fuchsia;
        }

        .box {
            height: 100px;
            border: 10px solid firebrick;
        }

<div class="wrap">
    <div class="con">类名为wrap的div中的第一个元素</div>
    <div class="con2">类名为wrap的div中的第二个元素</div>
</div>

浮动元素对兄弟级元素布局的影响：

 /** 浮动元素对兄弟级元素布局的影响  */
        .box {
            border: 5px solid black;
        }
        .con1 {
            width: 200px;
            height: 100px;
            border: 2px solid seagreen;
        }

        /** 设置浮动不会对之前的兄弟级元素造成影响。之后的兄弟元素会受到影响 */
        .con2 {
            float: left;
            width: 100px;
            height: 100px;
            border: 2px solid saddlebrown;
            background-color: saddlebrown;
        }

        .con3 {
            width: 200px;
            height: 100px;
            border: 2px solid saddlebrown;
        }

<!-- 浮动元素对兄弟级元素布局的影响 -->
<div class="box">
    <div class="con1">第一个div</div>
    <div class="con2">第二个div,设置了浮动</div>
    <div class="con3">第三个div</div>
</div>