元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

正文

浮動是一種半脫離文檔流的狀態(tài)，他不像絕對定位那樣完全脫離文檔流

絕對定位：

<div id="div1" >
<div id="div2" ></div>
<div>

此時div1沒有設置高度，雖然在div2中設置了高度100px，但是div2是撐不開div1的高度的，因為絕對定位完全脫離文檔流，div1是完全感受不到div2的；

浮動：第一種情況　

<div id="div1" >
<div id="div2" ></div>
</div>

我們在div2中設置了向左浮動，假如你沒有在div1中清除div2浮動帶來的影響，那么你也是無法撐開div1的高度的，因為div1感受不到浮動.

但是當你清除了浮動之后，div1就能感受到浮動的存在了（相當于浮動現在是在文檔流中），高度就會撐開。

這里有兩種解決方法

浮動：第二種情況

<p>SHJB陽癲瘋</p>
<div id="div2" ></div>

因為浮動（div2）能感受得到這里的<p>，所以該怎么顯示就怎么顯示;即浮動元素之前的元素將不會受到影響。

浮動：第三種情況

<div id="div2" ></div>
<p ;>shjb陽癲瘋</p>

<p>是感受不到浮動（div2）的存在的，那么<p>是會被浮動覆蓋的，但是他又不是完全被覆蓋。

我們可以發(fā)現<p>的背景確實是被覆蓋了，但是<p>的文本內容沒有被覆蓋，這也是浮動的一個怪異的地方——浮動不會覆蓋文檔流中文本，但是其他屬性會覆蓋。

解決方法

給<p>設置一個clear:left;　清除浮動的影響，讓<p>能感受的到（div2）的存在。

<div id="div2" ></div>
<p ;>shjb陽癲瘋</p>

以上這篇淺談CSS浮動的那點事兒就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/SoYang/archive/2016/07/20/5686840.html

最新評論