CSS中的浮動是前端開發(fā)中常用的一種布局方式,通過給元素設(shè)置浮動屬性,可以將其從正常文檔流中脫離出來并沿著某個方向排列,從而實現(xiàn)多列布局、圖片與文本混排等效果。
.float-left { float: left; } .float-right { float: right; }
通過設(shè)置float屬性的值為left或right,可以實現(xiàn)元素的向左或向右浮動。浮動元素的寬度默認為其內(nèi)容的寬度,但可以通過設(shè)置width屬性來調(diào)整寬度大小。
.box { width: 300px; height: 200px; border: 1px solid #ccc; margin-bottom: 20px; } .img-wrap { float: left; width: 100px; height: 100px; margin-right: 10px; } .text-wrap { float: left; width: 180px; height: 100px; }
在實現(xiàn)圖片與文本混排時,可以將圖片元素和文本元素都設(shè)置為浮動元素,并通過設(shè)置寬度和margin屬性來實現(xiàn)排列效果。需要注意的是,為了避免浮動元素對正常文本流的影響,需對其父元素添加清除浮動的樣式。
.clearfix::after { content: ''; display: block; clear: both; }
以上是清除浮動的方法,其中添加了content為空、display為block、clear為both的偽元素,將其添加到浮動元素的父元素之后,可以清除浮動元素對正常文本流的影響。
下一篇css中的>符號