zoukankan      html  css  js  c++  java
  • CSS深入理解之float(HTML/CSS)

    float的设计初衷仅仅是:为了文字环绕效果

    float的包裹与破坏

    包裹:收缩、坚挺、隔绝(BFC)

    破坏:父元素高度塌陷

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Layout</title>
        <style>
          .box{
              border: 1px solid red;
              width: 300px;
              margin: 20px auto;
          }
          .left{
              float: left;
              height: 100px;
              width: 50px;
              border: 1px solid black;
          }
          .right{
              float: right;
              height: 100px;
              width: 50px;
              border: 1px solid green;
          }
        </style>
      </head>
      <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>
      </body>
    </html>
    View Code

    如何降低float破坏性的影响(清除浮动)?

    1、底部插入clear:both;

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Layout</title>
        <style>
          .box {
            border: 1px solid red;
            width: 300px;
            margin: 20px auto;
          }
          .clearfix {
            clear: both;
          }
          .left {
            float: left;
            height: 100px;
            width: 50px;
            border: 1px solid black;
          }
          .right {
            float: right;
            height: 100px;
            width: 50px;
            border: 1px solid green;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <div class="left"></div>
          <div class="right"></div>
          <div class="clearfix"></div>
        </div>
      </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Layout</title>
        <style>
          .box {
            border: 1px solid red;
            width: 300px;
            margin: 20px auto;
          }
          .box:after {
            content: '';
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
          }
          .left {
            float: left;
            height: 100px;
            width: 50px;
            border: 1px solid black;
          }
          .right {
            float: right;
            height: 100px;
            width: 50px;
            border: 1px solid green;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Layout</title>
        <style>
          .box {
            border: 1px solid red;
            width: 300px;
            margin: 20px auto;
          }
          .box:after {
            content: '';
            display: table;
            clear: both;
          }
          .left {
            float: left;
            height: 100px;
            width: 50px;
            border: 1px solid black;
          }
          .right {
            float: right;
            height: 100px;
            width: 50px;
            border: 1px solid green;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </body>
    </html>
    View Code

    2、父元素BFC/haslayout

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Layout</title>
        <style>
          .box {
            border: 1px solid red;
            width: 300px;
            margin: 20px auto;
            overflow: hidden;
          }
          .left {
            float: left;
            height: 100px;
            width: 50px;
            border: 1px solid black;
          }
          .right {
            float: right;
            height: 100px;
            width: 50px;
            border: 1px solid green;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </body>
    </html>
    View Code

    float的特性

    1、元素block块状化(砖头化);

    2、破坏性造成的紧密排列特性(去空格化)。

  • 相关阅读:
    Spring-12-spring整合Mybatis
    Spring-11-AOP面向切面编程
    jQuery选择器之表单元素选择器
    phpsmarty分配变量
    angular
    ajax 第四步
    ajax第三步
    php+ajax+jq
    二十三种设计模式[4]
    二十三种设计模式[3]
  • 原文地址:https://www.cnblogs.com/fengxiongZz/p/8148673.html
Copyright © 2011-2022 走看看