溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這里介紹下float布局的幾種常見布局方式，如果對基礎知識有疑問可以去看一下上一篇文章CSS浮動基礎知識
顧名思義流體布局就是布局格式可以隨著窗口大小的變化而變化，具體實現如下
代碼演示(后續CSS代碼均在此代碼基礎上進行修改)
<body>
<div class="container clearfix">
<main class="main">
<div class="content"></div>
</main>
<aside class="aside" ></aside>
</div>
<p>testtesttest</p>
</body>
</html>CSS代碼
<style type="text/css">
.main{
width:100%;
float:left;
}
.content{
height:300px;
margin:0 200px;
background:yellow;
}
.aside{
width:180px;
height:300px;
background:red;
float:left;
margin-left:-100%;
/*流體布局的重點是邊欄的左邊距-100%，通過負值可以將元素強行拉到上一行*/
}
</style>處理結果如下
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
