本篇文章給大家帶來的內容是關於css中flaot浮動的原因及帶來的問題分析 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。
left，right，none，inherit
使用浮動之後，元素會脫離標準的文檔流。（標準的文檔流就是按照不同的元素種類，如塊元素，行元素按照各自的特點去排列顯示，雖然屬性不同，但都是按照從上到下，從左至右的順序進行排列）
兩個區塊層級元素，會被浮動元素覆蓋
<style type="text/css"> .box{ border: 4px solid #000000; width: 200px; height: 200px; display: inline-block; } .itemSmall_1{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; /* float: left; */ } .itemSmall_2{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; float: left; } .itemBig{ background-color: blue; width: 150px; height: 150px; border: 2px solid #000000; } </style><body> <div class="box"> <div class="itemSmall_1"> </div> <div class="itemBig"> </div> </div> <div class="box"> <div class="itemSmall_2"> </div> <div class="itemBig"> </div> </div> </body>
*一個塊元素，一個行內元素。行內元素如文字會浮動在浮動元素的周圍，為浮動元素留出空間。
<style type="text/css"> .box{ border: 4px solid #000000; width: 200px; height: 200px; display: inline-block; vertical-align: top; } .itemSmall_1{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; /* float: left; */ } .itemSmall_2{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; float: left; } .itemBig{ background-color: blue; width: 150px; height: 150px; border: 2px solid #000000; } </style> <body> <div class="box"> <div class="itemSmall_1"> </div> <div class="itemBig"> </div> </div> <div class="box"> <div class="itemSmall_2"> </div> 行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素 </div> </body>
*兩個區塊層級元素浮動，出現父元素塌縮
<style type="text/css"> .box{ border: 4px solid #000000; float: left; } .itemSmall_2{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; float: left; } .itemBig2{ background-color: blue; width: 150px; height: 150px; border: 2px solid #000000; float: left; } </style> <body> <div class="box"> <div class="itemSmall_2"> </div> <div class="itemBig2"> </div> </div> </body>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
