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

  • 相关阅读:
    SQL_Server_2005_启用远程连接
    Oracle外网或内网远程连接
    还原数据库到指定时间点
    SQL Server账号密码(sa)登录失败 错误原因:18456
    sql server如何设置密码过期时间呢?
    安装SQL Server2014 :规则”Windows Management Instrumentation (WMI)服务 “失败
    impala
    dolphinscheduler
    829. Consecutive Numbers Sum 连续的数字求和
    472. Concatenated Words 查找自己拼出来的单词 反向word break
  • 原文地址:https://www.cnblogs.com/fengxiongZz/p/8148673.html
Copyright © 2011-2022 走看看