HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）

浮动的相关属性

以下使浮动的常用属性值：

float：	设置浮动
以下属性：
left : 设置左浮动
right : 设置右浮动
none ：不浮动，默认值

clear	清除浮动 清除前面兄弟元素浮动元素的响应	
以下属性：
left ：清除前面左浮动的影响
right ：清除前面右浮动的影响
both ：清除前面左右浮动的影响

元素浮动之后的特点

在上面我们知道了对于浮动的元素，其会脱离标准文档流。
浮动产生的影响：

脱离文档流。
不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
不会独占一行，可以与其他元素共用一行。
不会margin 合并，也不会margin 塌陷，能够完美的设置四个方向的margin 和padding 。
不会像行内块一样被当做文本处理（没有行内块的空白问题）。

6.当元素浮动之后，下面的元素就可以向上提升位置，占有浮动元素的位置。

解决浮动产生的影响

浮动产生的一些困扰：

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

其实最主要要解决的影响是（父元素高度塌陷），以下是解决方案：

方案一：给父元素指定高度。
方案二：给父元素设置浮动，带来其他影响。
方案三：给父元素设置 overflow:hidden 。
方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both

额外标签：谁需要清除浮动就在该元素后面添加一个空白标签，属性设置为：clear:both

方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动（推荐使用）
伪元素对于其父元素，我们可以给其加上一个类，并对该类进行如下设置：

.clearfix::after {
/* 设置添加子元素的内容是空 /
content: '';
/ 设置添加子元素为块级元素 /
display: block;
/ 设置添加的子元素的高度0 /
height: 0;
/ 设置添加子元素看不见 /
visibility: hidden;
/ 设置clear：both */
clear: both;
}

作业

盒子模型

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0px auto; padding:0px; /* 自动减去边距宽度 */ box-sizing: border-box; } /* 整体 */ #all{ width: 970px; height: 586px; /* 整体背景颜色，看效果 */ /* background-color: palegoldenrod; */ }

      /* 顶部 */
      #top{
          width: 970px;
          height: 103px;
          /* 在最开始设置整体布局可以写一下 */
          /* background-color: pink; */
      }
      /* 红色的盒子 */
      .left1{
          float: left;

          width: 277px;
          height: 103px;
          background-color: red;
      }
       /* 右边 */
      .right1{
          float: right;
          width: 679px;
          height: 103px;

      }
      /* 语言选择 */
      .chinese{
          float: right;
          width: 137px;
          height: 49px;
          background-color: green;
          margin-bottom: 8px;

      }
      /* 导航条 */
      .banner{
          overflow: hidden;

          width: 679px;
          height: 46px;
          background-color: green;
      }


      /* 中部 */
      #middle{
          width: 970px;
          height: 435px;
          /* background-color:pink ; */
          margin-top:8px ;
      }
      /* 黄色部分 大广告 */
      .left2{
          float: left;
          width: 310px;
          height: 435px;
          background-color: yellow;
          margin-right: 10px;
      }
        /* 中部的中部部分 蓝色部分 */
        .center{
          float: left;
          width: 450px;
          height: 435px;
          
        }
        .one{
          width: 450px;
          height: 240px;
          background-color: skyblue;
        }

        .two{
          width: 450px;
          height: 110px;
          background-color: skyblue;
          margin-top: 10px;
        }
        .three{
          width: 450px;
          height: 30px;
          background-color: skyblue;
          margin-top: 10px;

        }
        .right2{
          overflow: hidden;
          width: 190px;
          height: 400px;
          background-color: purple;
        }
             /* 深蓝色 */
        .blue{
          float: left;
          
          width: 648px;
          height: 25px;
          background-color: blue;
          margin-top: 10px;
        }

        /* 底部 */
        #bottom{
          width: 970px;
          height: 40px;
          background-color: darkorange;
          margin-top: 10px;
        }
  </style>

</head> <body>

          <!-- 顶部 -->
           <div id="top">
                   <!-- 红色的盒子 -->
                 <div class="left1"></div>
                  <!-- 右部分 -->
                  <div class="right1">
                      <div class="chinese"></div>
                      <div class="banner"></div>
                  </div>
           </div>

           <!-- 中部 -->
            <div id="middle">
              <!-- 黄色部分 -->
                     <div class="left2"></div>
                     <!-- 浅蓝色部分 -->
                     <div class="center">
                      <div class="one"></div>
                      <div class="two"></div>
                      <div class="three"></div>
                       <!-- 深蓝色 -->
                     <div class="blue"></div>
                     </div>
                     <!-- 紫色 -->
                     <div class="right2"></div>
                    
            </div>

            <!-- 底部 -->
             <div id="bottom">

             </div>
  </div>

</body> </html>

公告

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0px; padding:0px;

      }
      #all{
          width: 500px;
          height: 400px;
      }
      .top{
          width: 480px;
          /* height: 100px; */
          margin: 10px;
          margin-bottom: 0px;
          border-top: 1px dashed;
          
      } 
      .bgc{
          width: 480px;
          height: 20px;
          background-color: rgb(227, 235, 241);
      }
      p{
          display: inline-block;
          border-left:3px solid blue ;
          padding-left: 16px;
          margin-left: 5px;
          font-size: 24px;
          /* margin-top: 20px; */
          color: blue;
          font-weight:bolder;
      }
    .top a{
          float: right;
          margin-top: 10px;
            color:blue ;
      }
      a{
          text-decoration: none;
      }
      .one{
          width: 480px;
          height: 2px;
          background-image: linear-gradient(to right , rgb(61, 47, 187),red);
          margin-top: 5px;
      }
      .bottom{
          width: 500px;
      }

      .bottom li{
            border-bottom: 1px dashed rgb(210, 207, 207);
             background: url(..//imgs/triangle1.png) no-repeat 4px;
             background-size: 12px 12px;
             padding: 5px;
             padding-left: 24px;
             margin: 10px;

      }
      span{
          float: right;
      }
  </style>

</head> <body>

通知公告

更多》

      <!-- 内容 -->
      <div class="bottom">
              <ul>
                  <li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li>
                  <li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li>
                  <li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li>
              </ul>
      </div>
  </div>

</body> </html>