所謂的css 的 float（浮動），有兩種屬性值，第一種是左浮動：float;left;。該屬性會使元素向左移動，周圍的元素則會根據此元素的位置散布在其周圍。
另一種是右浮動:float:right;會使元素向左或向右移動，該屬性會使元素向左移動，周圍的元素則會根據此元素的位置散布在其周圍。
我們先新建乙個html的基本框架：
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
head
>
>
body
>
html
>
class
="d"
>
>
專案一li
>
>
專案二li
>
>
專案三li
>
>
專案四li
>
>
專案五li
>
>
專案六li
>
ul>
list-style-type: none;則是為了隱藏列表前面的點。
現在我們來儲存並執行這個網頁，可以看到如下效果：
可以看到，列表成豎行排列，但在有些時候我們也會需要它橫向排列，這次就用到我們此次所學的知識：浮動。
現在我們將這個浮動**float:left;放到**list-style-type: none;的後面再重新整理瀏覽器就可以看到如圖所示的列表項橫向排列，因為列表的每一項都應用了左浮動的樣式。
浮動樣式分兩種，一種是float:left;左浮動，就是我們上面所講的。另一種是float:right;右浮動，這種浮動方式會使整個ul都靠在整個網頁的右邊。
我們首先需要準備如下**：
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
對css浮動的理解以及清除浮動
首先我們要了解什麼是浮動，在css中浮動就是使元素及元素內容脫離文件流，並且使其移動到其父元素的最左或最右邊。移動到其父元素的最左或最右邊 是指向左或向右移動直至碰到另乙個浮動元素或是父元素的邊界 不包括padding 如何清除浮動？通常我們最普遍的作法是直接清除浮動 clear both 但是這樣...
CSS浮動以及清除浮動
傳統網頁布局的三種方式 本質 用css擺放盒子。實際開發中，乙個頁面基本都包含了這三種布局方式 1 普通流 標準流 文件流 最基本的布局方式 標籤按照規定好預設方式排列 浮動 float屬性用於建立浮動框，將其移動到一邊知道左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。要想塊元素水平排列如果轉換成行...
CSS的浮動以及清除浮動
給元素新增了float屬性 float left,float right 可以讓元素進行橫向排列 做文字圍繞效果 因為文件流元素會忽視浮動元素的存在，但是文件流元素的文字卻不會。新增了float屬性後，該元素會脫離正常的文件流，所以會覆蓋其他的元素，父元素由於沒有被撐開，造成了高度塌陷。所以清除浮動...