布局方案的选择

　　最近后端在问同样的布局,有多种实现方式,怎么挑选一个适合的:) (本文不考虑flexbox,不一定是最佳的方案)

　　常用的布局就是两栏、三栏布局等等，然而两栏和三栏的布局实质使用的css技巧是比较接近,为啥是技巧，其实暂时我还是分不清楚技巧与技术的区别。常见是使用浮动,定位为主.探讨一些比较合理的方案,大概要先从浮动和定位的属性先进行理解.那么理解这些的东西之前先补充一下文档流

百度百科:

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流

浮动 float 

　　浮动元素脱离正常文本流,却还在文本流的左侧或者右侧,父亲元素无法获取浮动元素获取高度.然而浮动元素会触发BFC

BFC(Block formatting context)直译为"块级格式化上下文",具体的东西我就不解释了.

绝对定位position :absolute

　　元素完全脱离文本流,父亲元素无法获取绝对定位的子元素的高宽,该元素同样触发BFC;

相对定位position :relative

　　元素还在文本流中占据相对的空间,元素基于原位置进行偏移;

在了解属性对文本流的影响之后就可以探讨一下布局,

二栏布局

　　 左右浮动实现 内容优先的情况下,需要对两栏的元素都限定宽度,然而看上去挺美好,而且需要清除浮动,

　　

<style>
.wrap{
    overflow: hidden;
}
 .left {
    float: left;
    width: 40px;
}
 .main {
    float: right;
    width: 40px

}
</style>
<div class="wrap">
    <div class="main">main</div>
    <div class="left">left</div>
</div>

　　假如不需要内容优先,还是可以指定一侧宽度,另外一次使用display inline-block 制作自定义宽度.

　　table布局不参与讨论

　　定位实现 可以把侧栏都定位对应的位置,也可以做到内容优先,缺点,就是父亲元素的高度无法获取定位元素的高度,导致一个比较严峻的问题就是假如侧栏内容高度高于内容就会出现超出问题,用min-height或者js可以处理

     

<style>
    .wrap3{
        position: relative;
    }
    .wrap3 .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
    }
    .wrap3 .main {
        margin-left: 150px;
    }
    </style>
<div class="wrap3">
    <div class="main">main</div>
    <div class="left">left</div>
</div>

　　inline-block 实现布局, inline-block元素间存在间隙,也有消除这个空格的方案,但是都不完美,代码就懒得写了,

 

怎么看好像我个人都比较推崇 浮动实现...因为还位于文本流,操作兼容方面还是比较顺手,

最后补充一个内容优先的三栏的布局,三栏布局就不加以细说,

<style>
    .wrap3{
        overflow: hidden;
    }
    .wrap3 .left {
        float: left;
        width: 200px;
        margin-left:-100%;
        background: lightgray
    }
    .wrap3 .right {
        float: right;
        width: 200px;
        margin-left:-100%;
        background: lightgray
    }
    .wrap3 .main_box {
        float: left;
        width: 100%;
        background: green;
    }
    .wrap3 .main {
        margin: 0 200px; 
    }
    </style>
<div class="wrap3">
    <div class="main_box">
        <div class="main">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

注意:代码使用overflow:hidden 进行清除浮动,一般overflow 会在小布局使用,主体布局还请使用clearfix;