作者jasonchris (已經醒了)
看板Web_Design
標題[問題] 一個div+css的問題
時間Mon Sep 28 10:11:15 2015
大家好，我目前還停留在div+css切版的學習階段，
最近遇上了一個問題，就是外圍有一個大div，高度設為自動(auto)，
之後裡邊要插入兩個div(裡邊div內容會一直增加內容)
這時候問題來了，最外圍的div會因為裡邊有設浮動而脫離文檔流，就無法
包覆裡邊的div，因此我去查找了，大概有三種方法可以解決：
想請問這些方法的差別?
以下是程式碼：
<!doctype html>
<html>
<head>
<style>
.clear:after {
content:'';
display:block;
clear:both;
}
#outwrap_1{
width:1000px;
height:auto;
margin:0 auto;
background:#666;
overflow:hidden;
}
#outwrap_2{
width:1000px;
height:auto;
margin:20px auto 0;
clear:both;
background:#06C;
}
#outwrap_3{
width:1000px;
height:auto;
margin:20px auto 0;
background:#ccc;
}
.ex_1a{
float:left;
width:400px;
height:500px;
margin:50px;
background:#096;
}
.ex_1b{
float:left;
width:200px;
height:700px;
background:#FF0;
}
</style>
</head>
<body>
<!-- 第一種是最外圍div的css為height:auto;overflow:hidden;-->
<div id="outwrap_1">
<div class="ex_1a"></div>
<div class="ex_1b"></div>
</div>
<!-- 第二種是在裡邊塞入一個div 且設css為 .clear:both;-->
<div id="outwrap_2">
<div class="ex_1a"></div>
<div class="ex_1b"></div>
<div class="clear"></div>
</div>
<!-- 第三種則是最外圍的div 給一個class的css屬性為.clear:after-->
<div id="outwrap_3" class="clear">
<div class="ex_1a"></div>
<div class="ex_1b"></div>
</div>
</body>
</html>
想請問這樣的差別是?
--
不停追著自己的目標
人不可以窮死
人不可以氣死
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.234.180.213
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1443406278.A.D87.html
1F：→ miau: 第一個當你裡面有用到超出範圍的絕對定位元素就會被隱藏 09/28 14:34
2F：→ miau: 第二個會多一個沒用的div只是用來做clear 09/28 14:35
4F：→ miau: 比較好讀 09/28 14:37