在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ overflow也可以實(shí)現(xiàn)左側(cè)固定，右側(cè)自適應(yīng)布局？？

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é)果

clipboard.png

問題

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

回答
編輯回答
黑與白

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

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

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

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

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

規(guī)則如下：

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

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

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

2017年4月19日 03:09
編輯回答
夢囈

同學(xué)提到了BFC，我搜了一下，看了這篇文章，知道了原理：BFC的理解
文中提到：

  1. BFC的區(qū)域不會與float的元素區(qū)域重疊；
  2. 計算BFC的高度時，浮動子元素也參與計算（float解決父元素高度坍塌原理）
  3. BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素，反之亦然；
2017年11月27日 13:55
編輯回答
傲嬌范

是的，可以實(shí)現(xiàn)左側(cè)固定，實(shí)現(xiàn)多列布局，具體什么原理沒有詳細(xì)探究
sf問答列表采用的就是這種形式
clipboard.png

2017年11月17日 09:10