CSS清除浮動使父級元素展開的三個方法

2024-07-11 08:28:28

字體：大中小

來源：轉載

供稿：網友

一個沒有設置高度的容器div內如果存在浮動元素（即使用了屬性float:left或者float:right)，那么該父級元素會無法展開。
舉個例子，有一個div容器，div容器里有兩個小容器，分別向左和向右浮動，為了區別這三個容器，分別設置了不同顏色的邊框。

復制代碼

代碼如下:
<html>
<head>
<style>
.content {
width:500px;
border:1px solid red;
}
.left {
width:100px;
height:100px;
border:1px dashed blue;
float:left;
}
.right {
width:100px;
height:100px;
border:1px dashed green;
float:right;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

產生效果：

注意到父級元素content沒有展開。

為了使父級元素展開，有三種方法：

第一：設置父級元素的高度，但是要事先知道內容的高度，這里內部的元素高度是100像素，加上上下邊框高度2像素，一共是102像素。

復制代碼

代碼如下:
<html>
<head>
<style>
.content {
width:500px;
border:1px solid red;
height:102px;
}
.left {
width:100px;
height:100px;
border:1px dashed blue;
float:left;
}
.right {
width:100px;
height:100px;
border:1px dashed green;
float:right;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

第二：添加樣式，并在父級元素結束標簽前添加both:clear樣式。

復制代碼

代碼如下:
<html>
<head>
<style>
.content {
width:500px;
border:1px solid red;
}
.left {
width:100px;
height:100px;
border:1px dashed blue;
float:left;
}
.right {
width:100px;
height:100px;
border:1px dashed green;
float:right;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
</html>

上一篇：CSS media queries

下一篇：table表格的一些常用屬性介紹

發表評論

共有條評論