HTML5基礎加強css樣式篇（float補充，清除浮動解決高度塌陷問題，定位補充）（一）

厚積薄發2017發表於2017-03-03
HTMLCSS

1.float補充：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
     #box1,#box2,#box3{
         width: 100px;
         height: 100px;
         float: left;
     }
      #box1{
         background-color: red;
      }
     #box2{
      background-color: green;
         /*
         給兄弟元素設定清除左浮動浮動使前一個元素的右邊沒有浮動元素
         清除浮動主要用於解決高度塌陷問題
         */
         /*clear: left;*/
        /*//清除浮動簡單方式*/
         /*clear: both;*/

     }
     #box3{
         /*clear: left;*/
         background-color: blue;
     }
    </style>
</head>
<body>

   <div id="box">
       <div id="box1"></div>
       <div id="box2"></div>
       <div id="box3"></div>
   </div>

</body>
</html>

2：清除浮動解決高度塌陷問題：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
     #box{
         width: 500px;
         background-color: aqua;
     }
     /*
     給父元素設定個偽元素，設定如下可以解決高度塌陷，沒有復作用，使用  overflow: hidden; 有復作用
     */
     #box:after{
         content: "";
         display: block;
         clear: both;

     }
     #box1,#box2,#box3{
         width: 100px;
         height: 100px;
         float: left;
     }
      #box1{
         background-color: red;
      }
     #box2{
      background-color: green;
         /*
         給兄弟元素設定清除左浮動浮動使前一個元素的右邊沒有浮動元素
         清除浮動主要用於解決高度塌陷問題
         */
         /*clear: left;*/
        /*//清除浮動簡單方式*/
         /*clear: both;*/

     }
     #box3{
         /*clear: left;*/
         background-color: blue;
     }
    </style>
</head>
<body>

   <div id="box">
       <div id="box1"></div>
       <div id="box2"></div>
       <div id="box3"></div>
   </div>

</body>
</html>


3.定位補充：


 

相關文章