zoukankan      html  css  js  c++  java
  • 清除浮动

    清除浮动

    浮动元素会脱离文档流,使得行内元素环绕它的效果,但是它也会造成父元素塌陷、元素重叠的问题,所以这个时候就需要清除浮动带来的影响。清除浮动的方法主要有三种:

    以这段代码为例:

    <div class="content">
        <div class="a"></div>
        <div class="b"></div>
        这里面是一段文字效果
    </div>
    <style>
        .a, .b{
            50px;
            height:100px;
            border: 1px solid green;
        }
        .a{
            float:left;
        }
        .b{
            float:right;
        }
        .content{
            100%;
            border:1px solid pink;
            clear:both;
        }
    </style>
    

    上面的代码中,由于a、b脱离文档流并分别位于content的两侧,而此时content的高度仅仅只是文字的高度,这是因为a、b两个元素浮动造成了父元素塌陷,那么消除浮动带来的影响呢?

    1. div+clear

      在content内加一个div的空白元素如下:

      <div class="content">
          <div class="a"></div>
          <div class="b"></div>
          这里面是一段文字效果
      	<div class="clearfix"></div>
      </div>
      <style>
          .clearfix{
              clear:both;
          }
      </style>
      
    2. 伪元素+clear

      .content:after{
          content: '';
          display: block;
          clear: both;
      }
      
    3. BFC原理

      将content声明为BFC

      .content{
          overflow: hidden;
      }
      
  • 相关阅读:
    docker pull 报错解决办法
    cobbler自动装机!
    centos7 日志定期清理
    【转载】python 模块
    0603 python 基础02
    0527 python 基础01
    0520 python
    160519 如何做自动化测试?
    SourceTree&Git部分名词解释
    sourceTree安装与使用
  • 原文地址:https://www.cnblogs.com/171220-barney/p/9385451.html
Copyright © 2011-2022 走看看