1. 浮動
1.1 什麼是浮動
float是乙個css定位屬性, 要了解他的目的和起源, 我們可以看看印刷設計, 在列印布局中, 可以將影象設定到頁面中, 使得文字根據需要環繞他們。
而在頁面中浮動是這樣工作的: 浮動元素會脫離正常的文件布局流,並吸附在其父容器的左邊/右邊(float: left/right)。在正常布局下中位於該浮動元素之下的內容,此時會圍繞著浮動元素。填滿左側或右側的空間。
浮動元素仍然是網頁流的一部分,這與使用絕對定位的頁面不同, 絕對定位的頁面元素將從網頁的布局流中移除。
1.2 浮動使用場景
除了影象環繞文字之外,浮動可用於建立整個網頁布局
在較小的布局中,浮動對布局也很有幫助, 如果我們使用float應用到我們的影象上,那麼當影象改變大小時, 框中的文字將回流適應
同樣的布局也可以通過容器上的相對定位和絕對定位來完成,這樣做的話, 文字將不會受到化身的影響,並且不能在大小改變時重新排版
1.3 清除浮動
float的相對屬性是clear, 乙個擁有clear屬性的元素, 並不向像浮動元素的方向移動,而是會在浮動元素的下方
在上面的例子中,slidebar像右浮動,比main content內容區域短,然後footer被移動到浮動所需的可用空間。要解決這個問題,我們可以給footer元素設定清除浮動時
clear也有四個有效值,both是最常用的,清楚來自任意方向的浮動,left和right可以用來分別從乙個方向清除浮動。
1.4 浮動問題
如果父元素只包含浮動的元素,那麼他的高度就會塌陷。如果父元素不包含任何視覺明顯的背景,並不會有什麼問題。但是更難的是這種情況
float before
float after
這樣使用浮動會在文字流**現不自然的間隔中斷。而且沒有實際的方法來修復他
1.5 清除浮動的技巧
.clearfix
.clearfix:after
閱讀原文:
重新開始忙碌！！！
本以為可以繼續輕鬆到六月份去公司上班，剛剛接到的乙個 又把我拉上了快車道。公司部門的老大讓我盡快去公司實習，下週就要開始，每週三天。唉，又要開始一段非常忙碌的日子了！畢業 還沒有開始寫，又剛報了駕校學駕駛，現在還要去公司實習，每星期三天！天呢，從12月份輕鬆到現在整整三個月，看來我又要忙碌起來了.本...
重新開始學彙編
突然間在書房裡面找到了一本發黃的圖書，是自己在剛進高中的時候買的 組合語言程式設計 曾經的那份衝動不被遺忘，突然間的再次讓我熱血沸騰。於是我重新開始學習彙編，還好機器安裝了gas,ld。第乙個a 程式，比較簡單 2007.8.7 roland lee use dynamic lib to print...
Fluxbuntu重新開始開發
號召大家寄張賀卡 或其他新年祝福 給 災區的孩子們，他們比我們更需要這份祝福。fluxbuntu是一款基於輕便的fluxbox視窗管理器的乙個ubuntu衍生發行版.在7.10之後，曾一度中斷了開發。近日，fluxbuntu官方 更新，宣稱將發布8.10和9.04的fluxbuntu，並且提供測試版...