在HTML5中,設置元素的左浮動是非常簡單的。我們先來看一下如何使用CSS設置元素的左浮動:
div { float: left; }
上面的代碼表示將div元素設置為左浮動。
但是在實際的開發中,我們可能會遇到需要設置兩個元素并排顯示的情況。這時候,我們可以給這兩個元素都設置左浮動:
元素1元素2
上述代碼的效果是將元素1和元素2并排顯示,且左浮動。
需要注意的是,在使用左浮動布局時,如果浮動的元素寬度超出了容器的寬度,那么容器將會自動擴展以適應浮動元素:
元素1元素2
上述代碼中,元素1的寬度為50px,元素2的寬度為60px,而容器的寬度只有100px,但是由于兩個元素的寬度相加大于100px,因此容器會自動擴展以適應這兩個元素的寬度。
總之,在HTML5中設置元素的左浮動非常簡單,只需要使用CSS的float屬性即可實現。
下一篇js與css的關系