整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<img src="./w_1.jpg" alt="表情包" title="寫信" />浮動：脫離文檔流，父元素不計算它的高度，會導致塌陷，影響后邊元素的布局。
.wrap {
border: 1px solid fuchsia;
}
.box {
width: 200px;
background: red;
float: left;
} <div class="wrap">
<div class="box">
我是愛美的姑娘，關注我，每天為您分享和復習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲
</div>
</div>如下圖，父元素本來有一個邊框的，但是由于子元素浮動了，它不會計算浮動元素的高度，就塌陷了。如果我們再繼續寫元素，布局就亂了，這時候就需要把這一塊隔離開。不影響外邊的元素，同時外邊的元素也不能影響它，這時候就可以清除浮動來解決：
清除浮動的幾種方式：
BFC的特點：
給父元素設置：
<style>
.wrap {
border: 1px solid fuchsia;
overflow: hidden;
}
.box {
width: 100px;
background: red;
float: left;
}
</style>
<body>
<div class="wrap">
<div class="box">
我是愛美的姑娘，關注我，每天為您分享和復習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲
</div>
</div>
</body>缺點： IE6 中還需要觸發 hasLayout ，例如為父元素設置容器寬高或設置 zoom:1。
<style>
.wrap {
border: 1px solid fuchsia;
overflow: hidden;
}
.box {
width: 100px;
background: red;
float: left;
}
.clear {
clear: both;
}
.box_2 {
width: 100px;
height: 100px;
background: darkblue;
}
</style>
<body>
<div class="wrap">
<div class="box">
我是愛美的姑娘，關注我，每天為您分享和復習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲
</div>
</div>
<div class="clear"></div>
<div class="box_2"></div>
</body>如下圖：
缺點：會新增多余的空標簽，后期維護麻煩
<style>
.wrap {
border: 1px solid fuchsia;
}
.box {
width: 100px;
background: red;
float: left;
}
.wrap::after {
content: '';
display: block;
clear: both;
}
.box_2 {
width: 100px;
height: 100px;
background: darkblue;
}
</style>
<body>
<div class="wrap">
<div class="box">
我是愛美的姑娘，關注我，每天為您分享和復習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲
</div>
</div>
<div class="box_2"></div>
</body>如下圖：
缺點：用zoom:1觸發hasLayout.
我是愛美的姑娘，關注我，每天為您分享和復習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲
例
使用 <summary> 元素：
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
瀏覽器支持
目前，只有 Chrome 和 Safari 6 支持 <summary> 標簽。
標簽定義及使用說明
<summary> 標簽為 <details> 元素定義一個可見的標題。 當用戶點擊標題時會顯示出詳細信息。
HTML 4.01 與 HTML5之間的差異
<summary> 標簽是 HTML5 中的新標簽。
提示和注釋
注釋：<summary> 元素應該是 <details> 元素的第一個子元素。
全局屬性
<summary> 標簽支持 HTML 的全局屬性。
事件屬性
<summary> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
例
使用 <span> 元素對文本中的一部分進行著色：
<p>我的母親有 <span style="color:blue">藍色</span> 的眼睛。</p>
瀏覽器支持
所有主流瀏覽器都支持 <span> 標簽。
標簽定義及使用說明
<span> 用于對文檔中的行內元素進行組合。
<span> 標簽沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。如果不對 <span> 應用樣式，那么 <span> 元素中的文本與其他文本不會任何視覺上的差異。
<span> 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。
提示和注釋
提示：被 <span> 元素包含的文本，您可以使用 CSS 對它定義樣式，或者使用 JavaScript 對它進行操作。
HTML 4.01 與 HTML5之間的差異
NONE.
全局屬性
<span> 標簽支持 HTML 的全局屬性。
事件屬性
<span> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
