溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css中flaot浮動的原因及怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css中flaot浮動的原因及怎么解決”吧！
flaot浮動的原因與副作用
float中的四個參數
left，right，none，inherit
float浮動的原因
使用浮動之后，元素會脫離標準的文檔流。（標準的文檔流就是按照不同的元素種類，如塊元素，行元素按照各自的特點去排列顯示，雖然屬性不同，但都是按照從上到下，從左到右的順序進行排列）
float浮動的副作用
兩個塊級元素，會被浮動元素覆蓋
這里寫圖片描述
<styletype="text/css">
.box{
border:4pxsolid#000000;
width:200px;
height:200px;
display:inline-block;
}
.itemSmall_1{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
/*float:left;*/
}
.itemSmall_2{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
float:left;
}
.itemBig{
background-color:blue;
width:150px;
height:150px;
border:2pxsolid#000000;
}
</style><body>
<divclass="box">
<divclass="itemSmall_1">
</div>
<divclass="itemBig">
</div>
</div>
<divclass="box">
<divclass="itemSmall_2">
</div>
<divclass="itemBig">
</div>
</div>
</body>
*一個塊元素，一個行內元素。行內元素如文字會浮動在浮動元素的周圍，為浮動元素留出空間。
這里寫圖片描述
<styletype="text/css">
.box{
border:4pxsolid#000000;
width:200px;
height:200px;
display:inline-block;
vertical-align:top;
}
.itemSmall_1{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
/*float:left;*/
}
.itemSmall_2{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
float:left;
}
.itemBig{
background-color:blue;
width:150px;
height:150px;
border:2pxsolid#000000;
}
</style>
<body>
<divclass="box">
<divclass="itemSmall_1">
</div>
<divclass="itemBig">
</div>
</div>
<divclass="box">
<divclass="itemSmall_2">
</div>
行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素</div>
</body>
*兩個塊級元素浮動，出現父元素塌縮
這里寫圖片描述
<styletype="text/css">
.box{
border:4pxsolid#000000;
float:left;
}
.itemSmall_2{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
float:left;
}
.itemBig2{
background-color:blue;
width:150px;
height:150px;
border:2pxsolid#000000;
float:left;
}
</style>
<body>
<divclass="box">
<divclass="itemSmall_2">
</div>
<divclass="itemBig2">
</div>
</div>
</body>
感謝各位的閱讀，以上就是“css中flaot浮動的原因及怎么解決”的內容了，經過本文的學習后，相信大家對css中flaot浮動的原因及怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
