首先看例子。
title>
type="text/css">
.box
.con1
.con2
.con3
style>
head>
class="box">
class="con1">
div>
class="con2">
div>
class="con3">
div>
div>
body>
html>
在瀏覽器中用f12檢視發現
第三個div的margin值和第二個div內容區域產生了重合。
解決方案
第一種直接給浮動元素新增外邊距
即把樣式.con2新增**：
margin-bottom:20px;
title>
type="text/css">
.box
.con1
.con2
.con3
style>
head>
class="box">
class="con1">
div>
class="con2">
div>
class="con3">
div>
div>
body>
html>
title>
type="text/css">
.box
.con1
.con2
.con3
.clear
style>
head>
class="box">
class="con1">
div>
class="con2">
div>
class="clear">
div>
class="con3">
div>
div>
body>
html>
優點：通俗易懂，操作方便。
缺點：會新增大量無語義標籤，結構與表現未分離，不利於維護。
第三種br標籤清除浮動
title>
type="text/css">
.box
.con1
.con2
.con3
/*.clear*/
style>
head>
class="box">
class="con1">
div>
class="con2">
div>
clear="all">
class="con3">
div>
div>
body>
html>
即< br clear=」all」>
優點：比空標籤方式語義稍強，**量較少。
缺點：結構與表現未分離。
第四種父元素新增浮動
title>
type="text/css">
.box
.con1
.con2
.con3
style>
head>
class="box">
class="con1">
div>
class="con2">
div>
class="con3">
div>
div>
body>
html>
優點：語義化沒問題，同時**量少。
缺點：父級元素的相鄰元素布局受影響，於是需要繼續為其父級設定浮動操作，直到body為止。
還有兩種，我不會。
父級元素設定overflow：hidden或者autuo。
利用after偽元素清除浮動。
參考書籍 html5布局之路
浮動造成的高度塌問題 清除浮動
首先給定兩個盒子 設定盒子樣式為 box1 box2 用浮動可以解決盒子間隙問題但是會造成高度塌陷，也就是outer的盒子沒高度了。此時使用內牆法可以解決。在給定的盒子裡面再加乙個盒子如 然後給這個盒子指定樣式如 outer clearfix 這樣就會解決高度塌陷問題啦。第二種方法 父元素新增 ov...
浮動與浮動的清除
說浮動就必須提及一下文件流，html當中的元素按照從左到右，從上到下的順序進行排列稱之為文件流，也就是正常排列。而浮動是什麼呢？浮動會讓元素脫離文件流，假如a元素浮動了，原本排在該元素之後的元素發現a元素不在這個文件流了，就會無視它往上接到a元素前面的元素之後 ps 但是文字並不會無視它，還會環繞a...
CSS浮動 浮動的特性 清除浮動
乙個頁面基本包含了三種布局方式 標準流 浮動和定位 浮動可以改變元素標籤預設的排列方式，最典型的是可以讓多個塊級元素一行內排列顯示。網頁布局第一準則 多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。float屬性用於建立浮動框，將其移動到一邊，直到做邊緣或右邊緣觸及包含塊或另乙個浮動框的邊...