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、破坏性造成的紧密排列特性(去空格化)。

  • 相关阅读:
    致应届毕业生——程序员的生存法则 转自CSDN 作者:陈丽辉
    TIOBE 8月份编程语言排行榜,F#强势插入
    C–gcc命令行下的参数
    转载sunboy_2050 Android APK反编译详解(附图)
    转载IT168 分析:Python在Linux平台上的发展前景
    PHP 简单学习过程1
    买火车票必须知道的事
    Delphi PointerMath编译指令
    给DropDownList的DataTextField属性绑定两个字段
    通过HttpModule、httpHandlers防止SQL注入式攻击
  • 原文地址:https://www.cnblogs.com/fengxiongZz/p/8148673.html
Copyright © 2011-2022 走看看