html+css如何清除浮動
阿新 • • 發佈：2020-09-17
html程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css">
ul>li{
float: left;
list-style: none;
}
</style> </head> <body> <div class="box-area"> <ul> <li>專案一</li> <li>專案二</li> <li>專案三</li> <li>專案四</li> </ul> <p>我是段落</p> </div> </body> </html>
程式碼展示效果:
由於p元素上面的li設定了css浮動效果，所以他脫離了標準流，浮動的元素的父級元素不能被撐開，下面的元素也跟著上來，保持在同一行
解決辦法:
方式一:給浮動元素的父元素設定高度
ul{ height:30px; }
方式二：在父級元素上設定樣式屬性
ul{ overflow:auto;/*overflow:hidden;也可以*/ }
方式三：給浮動元素下面不需要浮動的元素上設定樣式屬性
p{ clear:both; }
效果: