zoukankan      html  css  js  c++  java
  • 清除浮动的原理和方法

    问题的由来:

    在CSS规范中,浮动定位是脱离元素正常流的。所以,只要含有浮动元素的父容器,在显示时不考虑子元素的位置,就当它们不存在一样。这就造成了显示出来,父容器好像空容器一样。

    比如下面代码:

    1 <div class="box">
    2     <div style="float:left;100px;height:100px;"></div>
    3     <div style="float:right;100px;height:100px"></div>
    4 </div>

    在浏览器中一运行,实际视图是子元素显示在父容器的外部。


    解决方法一:添加空元素

    在浮动元素下面添加一个非浮动的元素

    代码如下:

     1 <div class="box">
     2   <div style="float:left;100px;height:100px;"></div>
     3   <div style="float:right;100px;height:100px;"></div>
     4   <div class="clearfix"></div>
     5 </div>
     6 
     7 <style>
     8 .clearfix{
     9     clear:both;
    10 }
    11 </style>

    解决方法二:浮动的父容器

    将父容器也改成浮动定位,这样它就可以带着子元素一起浮动了

    代码如下:

     1 <div class="box">
     2     <div style="float:left;100px;height:100px;"></div>
     3     <div style="float:right;100px;height:100px;"></div>
     4 </div>
     5 
     6 <style>
     7 .box{
     8     float:left;
     9 }
    10 </style>

    解决方法三:浮动元素的自动clearing

    让父容器变得可以自动"清理"(clearing)子元素的浮动,从而能够识别出浮动子元素的位置,不会出现显示上的差错。

    代码如下:

     1 <div class="box">
     2   <div style="float:left;100px;height:100px;"></div>
     3   <div style="float:right;100px;height:100px;"></div>
     4 </div>
     5 
     6 <style>
     7 .box{
     8     overflow:hidden;
     9 }
    10 </style>

    解决方法四:通过CSS语句添加子元素,这样就不用修改HTML代码

    就是用after伪元素的方法在容器尾部自动创建一个元素的方法

    代码如下:

     1 <div class="box">
     2   <div style="float:left;100px;height:100px;"></div>
     3   <div style="float:right;100px;height:100px;"></div>
     4 </div>
     5 
     6 <style>
     7 .box:after {
     8     content: "020";
     9     display: block;
    10     height: 0;
    11     clear: both;
    12     zoom:1;
    13 }
    14 </style>
  • 相关阅读:
    CF741C.Arpa’s overnight party and Mehrdad’s silent entering [构造 二分图染色]
    CF719E. Sasha and Array [线段树维护矩阵]
    洛谷7月月赛
    CF666B. World Tour
    BZOJ4668: 冷战 [并查集 按秩合并]
    水题练习 2
    CF715B. Complete The Graph
    关于最短路、负环、差分约束系统的一点笔记
    关于最小生成树,拓扑排序、强连通分量、割点、2-SAT的一点笔记
    hdu1814 Peaceful Commission
  • 原文地址:https://www.cnblogs.com/zywaf/p/7251692.html
Copyright © 2011-2022 走看看