css浮動特性（難點）
阿新 • • 發佈：2020-08-02
浮動特性
加了浮動之後的元素,會具有很多特性,需要我們掌握
1.浮動元素會脫離標準文件流(脫標)
2.浮動的元素會一行內顯示並且元素頂部對齊
3.浮動的元素會具有行內塊元素的特性
設定了浮動(float)的元素最重要特性
1.脫離標準流的控制（浮）移動到指定位置(動),（俗稱脫標）
2.浮動的盒子不再保留原先的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>float脫離文件流</title> <style> * { margin: 0; padding: 0; } .left { width: 200px; height: 200px; background:pink; float: left } .right { width: 220px; height:220px; background-color: orange; } </style> </head> <body> <div class="left">左青龍</div> <div class="right">右白虎</div> </body> </html>
設定了浮動的元素,漂浮在普通流的上面,不佔位置,脫標 正常標準流顯示
浮動特性 一行顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>float脫離文件流</title> <style> * { margin: 0; padding: 0; } .left { width: 200px; height: 200px; background:pink; float: left } .center { width: 220px; height: 500px; background-color: springgreen; float: left; } .right { width: 220px; height:220px; background-color: orange; float: left; } </style> </head> <body> <div class="left">左邊</div> <div class="center">中間</div> <div class="right">右邊</div> </body> </html>
注意：浮動的元素是相互貼在一起的(不會有縫隙),如果父級寬度裝不下這些浮動的盒子,多出的盒子會另起一行對齊。