前言
我是歌謠 我有個兄弟 巅峰的時候排名c站總榜19 叫前端小歌謠 曾經我花了三年的時間創作了他 現在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷 本題目源自于牛客網 微信公衆号前端小歌謠
題目
自适應的雙列布局利用浮動、外邊和觸發父級BFC即可實作，這種方法主要是因為BFC的高度計算會包含其内的浮動元素的高度，父盒子會被撐開。
現在給類名為"container"的父盒子添加"overflow: hidden"屬性，使該父盒子成為BFC。繼續給類名為"left"的盒子設定"float: left"和"width: 100px"屬性，使該盒子成為浮動元素并且需要一個固定的寬度。最後再給類名為"right"的盒子設定左外邊距"margin-left: 100px"屬性，該屬性值需要和左浮動的盒子寬度一緻。此時父盒子的高度會根據左邊浮動元素、右邊内容區中高度較高的一方進行計算，并且右邊内容區的寬度自适應，最好是根據需要，配合最大或最小寬度進行設定。
完成以上所講的步驟即可通過測試，進入下一節的學習吧。
編輯
核心代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雙列布局</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
overflow: hidden;
}
.left {
border: 1px solid black;
float: left;
width: 100px;
}
.right {
margin-left: 100px;
}
</style>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
<article class="right"></article>
</section>
</body>
</html>