07. Float

HaiyueNovember 11, 2023About 4 min

Float

<!doctype html>
<html>
  <head>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        float: right;
        /*
          通过浮动可以使得一个元素向其父元素的左侧或右侧移动使用
            使用float属性来设置元素的浮动
              可选值：
                none: 默认值，元素不浮动
                left: 元素向左浮动
                right: 元素向右浮动
            注意：元素设置浮动后，水平布局等式不需要强制成立
              元素设置浮动后，会完全从文档流中脱离，因此元素下面的在文档流中的元素会自动向左上移动
            
            浮动特点：
              1. 浮动元素会完全脱离文档流，不在占据文档流中的位置
              2. 设置浮动后，元素回想父元素的左侧或右侧移动
              3. 浮动元素默认不会从父元素中移出
              4. 浮动元素不会覆盖其他元素
              5. 若上面为没有浮动的块元素，则浮动元素无法上移
              6. 浮动元素不会超过他上面的浮动的兄弟元素，最多何其一样高
        */
      }
      
      .box2 {
        width: 200px;
        height: 200px;
        background-color: orangered;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

NaviBar

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <style>
      * {
       margin: 0px;
       padding: 0px;
      }
      .nav li {
        height: 48px;
        width: 14.28%;
        float: left;
        line-height: 48px;
        background-color: rgb(62, 62, 73);
      }
      .nav a {
        height: 48px;
        width: 100%;
        text-align: center;
        display: block;
        line-height: 48px;
        background-color: rgb(153, 153, 158);
        text-decoration: none;
      }

      .head{
        margin-left: 5%;
        width: 90%;
      }

      .nav a:hover{
        background: #bfa;
        color:rgb(153, 153, 158);
      }
    </style>
  </head>
  <body>
    <div class="head">
      
    <ul class="nav">
      <li><a href="#">HTML/CSS</a></li>
      <li><a href="#">Brwser Side</a></li>
      <li><a href="#">Server Side</a></li>
      <li><a href="#">Programming</a></li>
      <li><a href="#">XML</a></li>
      <li><a href="#">WebBuilding</a></li>
      <li><a href="#">Reference</a></li>
    </ul>
    </div>

  </body>
</html>

Height collapse problem

Solution 1

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <style>
      * {
       margin: 0px;
       padding: 0px;
      }

      /*
        高度塌陷问题：
          在浮动布局中，父元素的高度默认式被子元素撑开的
            当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将无法撑起父元素的高度，导致父元素高度丢失
            父元素丢失后，旗下的元素会自动上移，导致页面的布局混乱

          BFC（Block Formatting Context）
            -- BFC式一个CSS中的一个隐含的属性，可以为一个元素开启BFC
              开启BFC该元素会变成一个独立的布局区域
            元素开启BFC后的特点：
              1. 开启BFC的元素不会被浮动元素覆盖
              2. 开启BFC的元素子元素和父元素外边不会重叠
              3. 开启BFC的元素可以包含浮动的子元素

          可以通过一些特殊方式开启元素的BFC
            1. 设置元素的浮动 (不推荐)
            2. 将元素设置为行内块元素    display: inline-block;（不推荐）
            3. 将元素的overflow设置为一个非visible的值 (auto/hidden)
      */
      .outer{
        border: 10px red solid;
        width: 200px;
        height: 200px;
        /* background-color:brown; */
        /* overflow: hidden; */
      }

      .inner{
        margin-top: 50px;
        /* float: left; */
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        
      }

      .box1{
        width: 100px;
        height: 300px;
        background-color:blueviolet;
      }
    </style>
  </head>
  <body>

    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box1">1</div>
  </body>
</html>

Solution 2

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <style>
      div{
        font-size: 50px;
      }

      .box1{
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
      }
      .box2{
        width: 400px;
        height: 150px;
        background-color: orange;
        float: right;
      }
      /*
        由于box1的浮动，导致box3位置上移，也就是box3收到了box1的复用影响，位置发生了改变
        如果我们不希望某个元素应为其他元素浮动的影响改变位置
          可以通过clear属性来清楚浮动元素对当前元素所产生的影响

        clear
          --作用：清楚浮动元素对当前元素所产生的影响：
            可选值
              left 清除左侧浮动元素对当前元素的影响
              right 清楚右侧浮动元素对当前元素的影响
              both 清除两侧影响最大的元素
            原理：
              设置清除浮动以后，浏览器自动为元素添加一个上外边距，以使其位置不发生改变。
      */
      .box3{
        width: 200px;
        height: 200px;
        background-color: yellow;
        clear: left;
      }
    </style>
  </head>
  <body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
  </body>
</html>

Solution 3

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <style>
      div{
        font-size: 50px;
      }

      .box1{
        border: 10px red solid;
        /* width: 200px;
        height: 200px; */
        background-color: yellow;
        /* float: left; */
        /* overflow: hidden; */
      }

      .box1::after{
        content: '';
        display: block;
        clear: both;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: orange;
        float: left;
      }
      .box3{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">2</div>
    </div>
  </body>
</html>

解决外边距重叠的方案

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <style>
      .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
      }
      .box1::before{
        content: '';
        display: table;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: orange;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>

  </body>
</html>

因此解决外边距重合和高度塌陷的问题使用如下方案

.clearfix::before,
.clearfix::after{
  content: '';
  display: table;
  clear: both;
}