zoukankan      html  css  js  c++  java
  • css 去除浮动布局

    前言

    在清楚浮动的时候呢,网上有7种,这里只介绍3种,小声哔哔,其他4种都有坑。

    正文

    第一种:

    <div class="container">
             <div>
             </div>
             <div>
             </div>
             <div>
             </div>
       </div>
       <div class="referEle">
       </div>
    
    .referEle{
       100px;
      height: 100px;
      background-color: yellow;
    }
    .container div{
      float: left;
       100px;
      height: 100px;
      margin-left: 10px;
      background-color: red;
    }
    .container::after
    {
      content: "";
      clear: both;
      display: block;
      height: 0px;
       0px;
    }
    

    怎么实现的呢?
    .container::after 可以理解为container下的最后一个元素,clear: both如果前面的有浮动,那么该元素就往下,这样就把div撑开了。

    这样写其实有一些场合用不上,::after可是一个热门伪元素,万一别的元素用了呢?

    替补方案:

    .referEle{
       100px;
      height: 100px;
      background-color: yellow;
    }
    .container div{
      float: left;
       100px;
      height: 100px;
      margin-left: 10px;
      background-color: red;
    }
    .clear
    {
      clear: both;
      height: 0px !important;
      float: none !important;
    }
    
    <div class="container">
    	 <div>
    	 </div>
    	 <div>
    	 </div>
    	 <div>
    	</div>
    	 <div class="clear">
    	 </div>
    </div>
    <div class="referEle">
    </div>
    

    但是这样平白无故会多出一个元素,所以另外的方式是:

    .overflow{
      overflow: auto;
      zoom: 1;
    }
    
    <div class="container overflow">
    	 <div>
    	 </div>
    	 <div>
    	 </div>
    	 <div>
    	</div>
    </div>
    <div class="referEle">
    </div>
    

    可能有些人觉得overflow:auto怎么可以呢?
    overflow:auto会根据内容裁剪部分来自动划分滚动条,怎么就可以了呢?
    其实这个元素如果不设置高度,那么会根据子元素内容的高度来设置自己的高度,来适应尽可能不出现滚动条。

  • 相关阅读:
    EPANET头文件解读系列4——EPANET2.H
    EPANET头文件解读系列3——TOOLKIT.H
    EPANET头文件解读系列2——ENUMSTXT.H
    EPANET头文件解读系列1——TEXT.H
    ENUMSTXT.H中的指针数组
    main函数的参数
    函数指针与指针函数
    FMDB源码阅读
    17个提升iOS开发效率的必用工具
    UIKit性能调优实战讲解
  • 原文地址:https://www.cnblogs.com/aoximin/p/12449017.html
Copyright © 2011-2022 走看看