overflow也可以實(shí)現(xiàn)左側(cè)固定，右側(cè)自適應(yīng)布局？？

html代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>測試</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .app {
        width: 800px;
        height: 600px;
        margin: 20px auto;
        overflow: hidden;
    }
    .siderbar {
        width: 200px;
        float: left;
    }
    .main {
        position: relative;
        overflow: hidden;
        background-color: #eee;
    }
</style>
</head>
<body>
    <div class="app">
        <div class="siderbar">
            我是側(cè)邊欄
        </div>

        <div class="main">
            我是主體
        </div>
    </div>
</body>
</html>

最后結(jié)果

問題

照原先的記憶中，float的子元素并不會(huì)占據(jù)父寬度，不過從結(jié)果看，它占用了，然后我測試了一下，關(guān)鍵屬性是
.main的overflow

回答

編輯回答

黑與白

為父級元素設(shè)置 overflow 是清除浮動(dòng)的方法之一

上面為原回答，更新下答案。

在 CSS 中有很多看似不符合“預(yù)期”的表現(xiàn)，比如題主的這個(gè)問題，還有類似 margin 塌陷，overflow 清除浮動(dòng)的問題。

這涉及 CSS2.1 中 BFC 的概念。

BFC 規(guī)定了瀏覽器渲染該 block 的規(guī)則。

規(guī)則如下：

內(nèi)部的 Box 會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box 垂直方向的距離由 margin 決定。屬于同一個(gè) BFC 的兩個(gè)相鄰 Box 的 margin 會(huì)發(fā)生重疊
每個(gè)元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC 的區(qū)域不會(huì)與 float box 重疊。
BFC 就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算

根據(jù)渲染規(guī)則第 3、6 條，利用 BFC 便可以實(shí)現(xiàn)自適應(yīng)兩欄布局。

而一個(gè) Block 是不是 BFC 其中有一個(gè)規(guī)則正是 “overflow 不能為 visible”（規(guī)則很多，不列舉），所以這解釋了題主的問題。

2017年4月19日 03:09

編輯回答