zoukankan      html  css  js  c++  java
  • css 清除float的方法

          首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝对 要么相对 ,都是能解决的.
          这个概念才理解的时候,我都想为什么要清除,我都设置了还要清除干嘛?
    后来知道 这个清除float 并不是把自身浮动清除,而是相对与前后兄弟标签来说的,也可能相对父级标签;
    
    下面来解释一下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .div1{
             90px;
            height: 90px;
            background-color: steelblue;
            border: 1px red solid;
    
        }
    </style>
    <body>
        <div style="background-color: gold; border: 1px solid red;">
            <div class="div1">标签1</div>
            <div class="div1">标签2</div>
            <div class="div1">标签3</div>
            <div class="div1">标签4</div>
            <!--<div style="clear: both; "></div>-->
        </div>
    </body>
    </html>
    
    
    
    
    

    因为DIV是块级标签很DIAO的,全部自成一行,如果想在标签一后后面直接跟上div1就要加入float:left;
    

      

    结果出现的情况是因为原来的父级DIV标签没有设置高度导致高度坍塌,全部脱离文档流后没有东西能撑起高度.原来的边框也就是一条线了!

    就是在底部加入了行标签 ,关键是里面的CSS,clear:both;
    他会清除里面所有的兄弟标签的float:left的属性,父级标签也撑起来了,所有的标签1 2 3 4都按左依次排列. 这个方法即让元素按设定浮动,又没有损害父类的高度.可以随着内部标签的增加,父级标签自动的填满背景,不坍塌.结果如下:

    还有另外一种方法:

  • 相关阅读:
    pku 1330 LCA
    最近公共祖先(LCA)的Tarjan算法
    字典数模板
    字典树
    RMQ问题ST算法与模板
    RMQ(Range Minimum/Maximum Query)问题:
    罗穗骞的dc3和倍增法
    多重背包问题
    tarjan LCA 算法
    终极工程师的造诣 – 不迷信高科技的乔布斯给我们的启示
  • 原文地址:https://www.cnblogs.com/laoguiaabb/p/8058844.html
Copyright © 2011-2022 走看看