菜鳥理解css的float浮動屬性 - 蝸愛CSS
Example Source Code .left{ background-color:black; border:2px solid #333333; width:200px; height:100px;}.leftfloat{ background-color:black; border:2px solid #333333; width:200px; height:100px; float:left;}.right{ background-color:black; border:2px solid #333333; height:100px;}left和right是不作浮動的類,leftfloat向左浮動。
Example Source Code <div class="left">沒有任何浮動</div><div class="right">沒有任何浮動</div><div class="leftfloat">向左浮動</div><div class="right">浮動在右邊</div><span class="left">沒有浮動</span><span class="right">沒有浮動</span>
HTML代碼 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]第一個和第二個容器按照塊元素的默認情況,各佔據一行,沒有任何浮動。第三個和第四個容器,第三個容器浮動到了左邊,第四個浮動到了右邊。第五個和第六個容器,是內聯元素,自然的處於同一行。要說明的是:他們的寬和高也沒有按照定義的那樣,這個也是block和inline標籤的區別之一。就是inline的高度和寬度就不能像block那樣隨便設置了,他的值是固定的就是inline中文字等的大小,對他設置不起任何作用。
推薦閱讀: