CSS Float 以及相關配置模式

float 取值

看一個栗子

紅色線框代表父元素

脫離文檔流，其實也沒有完全脫離，會被父元素的邊界擋住。

float的元素在同一文檔流

看一個栗子:

紅線框代表父元素

三個子項目『向左浮動』之後， 父元素就沒有內容了，所以父元素沒有高度了。

float元素半脫離文檔流

對元素，脫離文檔流；對內容，在文檔流。元素時會重疊，但是內容不會重疊。

舉個栗子：

        float元素半脫離文檔流    float : left A float is a box that is shifted to the left or right on the current line .the most interesting characteristic of a float (o "floated" o "floating" box)is that content may flow along its side (or be prohibited from doing so by the 'clear'property).

再舉一個栗子:

        float abscure                    float: left;        第十二屆ChinaJoy 動漫遊戲展7月31號在上海新國際博覽中心開幕，匯出是月台表演的帥哥美女。                    有些遊戲商為了吸引人氣，還請來了著名的演員、模特前來助陣。以下是一批漂亮的Show Girl現場照片。    

通常我們並不想要這個結果，而是粉色div 只被第一個文字塊環繞。 需要使用 clear 屬性

clear

要理解clear，首先要知道 div是區塊層級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流

①應用於後續元素, 來清除浮動對後續的影響。

②應用於區塊層級元素

使用方式：

增加一個空白元素(用得較少)

clearfix，這是一般通用方案。實際上是用一個停用點號，來清除浮動。

舉個栗子：

        float abscure                    float: left;        第十二屆ChinaJoy 動漫遊戲展7月31號在上海新國際博覽中心開幕，匯出是月台表演的帥哥美女。                    有些遊戲商為了吸引人氣，還請來了著名的演員、模特前來助陣。以下是一批漂亮的Show Girl現場照片。    

