在CSS中浮動(dòng)是一種常見的布局方法,可以使元素從浮動(dòng)方向脫離文檔流,從而實(shí)現(xiàn)現(xiàn)代web設(shè)計(jì)中越來越復(fù)雜的布局需求。
浮動(dòng)元素的方法很簡(jiǎn)單,只需要在樣式中使用float屬性即可實(shí)現(xiàn):
.example { float: left; }
此時(shí),浮動(dòng)的元素會(huì)向左浮動(dòng),并且以行塊級(jí)元素的方式排列。如果需要右浮動(dòng),則可以使用“right”屬性值,如下:
.example { float: right; }
另外,還可以使用“none”屬性值來取消浮動(dòng):
.example { float: none; }
需要注意的是,浮動(dòng)的元素對(duì)于其他元素的影響需要進(jìn)行清除,否則可能會(huì)出現(xiàn)布局混亂的情況。可以使用以下方法進(jìn)行清除浮動(dòng)影響:
.clearfix::after { content: ''; display: table; clear: both; }
上述代碼將在“clearfix”類選擇器的最后插入一個(gè)空的偽元素,并清除浮動(dòng)影響,使父元素完全包含浮動(dòng)子元素。