怎樣進行浮動的清除？
xiaoxiaoxiao遙
2017-05-03 19:56:00
3 回答
已采納
西蘭花偉大炮
TA貢獻376條經驗 獲得超318個贊
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<style>
????????.container{
????????????height:?auto;
????????????width:?400px;
????????????margin:?100px?auto;
????????????border:?2px?dotted?red;
????????}
????????.item{
????????????float:?left;
????????????width:?50px;
????????????height:?50px;
????????????background:?yellow;
????????????margin-right:?10px;
????????}
????????/*.clearfix::after{
????????????content:?"";
????????????height:?0;
????????????clear:?both;
????????????display:?block;
????????}*/
????????.last{
????????????clear:?both;
????????}
????</style>
</head>
<body>
????<div?class="container?clearfix"?>
????????<div?class="item"></div>
????????<div?class="item"></div>
????????<div?class="item"></div>
????????<div?class="item"></div>
????????<div?class="last"></div>
????</div>
</body>
</html>兩種方法，一種偽類，一種是在末尾添加空元素，歡迎采納
frece
TA貢獻36條經驗 獲得超15個贊
<!DOCTYPE?html>
<html>?
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style>
???? .fl{float:?left;}
??? ? .fr{float:?right;}
???? .square{width:?200px;?height:?200px;?border:?1px?solid?#0000ff;}
???? .clear{clear:?both;}
????</style>
</head>?
<body>
<div>
<div?class="square?fl">square1</div>
<div?class="square?fr">square2</div>
<div?class="clear"></div>
</div>
<label>test?text</label>
</body>?
</html>大型項目里都會定義一個 .clear 的樣式 ?需要的時候直接用，上邊代碼你可以把<div class="clear"></div>去掉看看區別
一般情況下， 有浮動必有clear
- 3 回答
- 0 關注
- 1404 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消