zoukankan      html  css  js  c++  java
  • web前端开发_清除浮动

    简单介绍清除浮动方式。

    1. 不清除浮动会怎样

    首先为什么要清除浮动?那是因为当你以如下简单例子布局时

    <div class="one">
      <div style="float: left;"></div>
      <div style="float: left;"></div>
    </div>
    <div class="second"></div>

    为.one,.two设置颜色和宽度,你会发现,second元素和one元素叠在了一起。这是由于浮动元素脱离了文档流排布,当下面紧接着非浮动元素排布时,就会出现此现象。

    2. so,怎么清除浮动

    这里记录比较常用的三种~

    1) 末尾添加空元素做清除

    <div>
        <div style="float: left;"></div>
        <div style="float: left;"></div>
        <div style="clear: both;"></div>
    </div>

    2) 父元素添加overflow zoom

    <div style="overflow: auto; zoom: 1;">
        <div style="float: left;"></div>
        <div style="float: left;"></div>
    </div>

    3) 利用伪元素清除

    <div class="outer">
        <div style="float: left;"></div>
        <div style="float: left;"></div>
    </div>
    <style type="text/css">
        .outer:after {
            display: block;
            content: '';
            clear: both;
        }
    </style>
  • 相关阅读:
    Rex 密钥认证
    MQTT协议之moquette 安装使用
    开源MQTT中间件:moquette
    Hazelcast入门简介
    Maven和Gradle对比
    rex 上传文件并远程执行
    myeclipse配置gradle插件
    ansible 新手上路
    CentOS release 6.5 (Final) 安装ansible
    spring boot 使用profile来分区配置
  • 原文地址:https://www.cnblogs.com/easyToCode/p/5196308.html
Copyright © 2011-2022 走看看