zoukankan      html  css  js  c++  java
  • CSS---float

    宽度  main:600;div1:200;div2:150;div3:250;div4:180;

    <div id="main">
     <div id="div1">div1</div>
     <div id="div2">div2</div>
     <div id="div3">div3</div>
     <div id="div4">div4</div>
    </div>

    该图中的div1和div3是标准流(即没有设置float),div2和div4为流动流(float:left)

    没有设置float属性(默认为none)的div称标准流(如:div1和div3),设置float的属性为left或right的div称为浮动流(如:div2和div4浮在标准流的上面)。

    浮动流位于标准流的上层,会遮住写在其后的标准流(如:div2遮住了标准流div3,但不会遮住写在其前面的标准流div1)。浮动流的顶端紧贴着写在其前面最近标准流的底端(如div2贴着div1的底端,div4贴着div3的底端)。

    外层的div高度等于其内的标准流div高度之和(如:main=div1+div3)。

    #div1{float:none} #div2,#div3,#div4{float:left}

    浮动流会尽可能向上浮动,以容纳之。

    补充:

    1、float元素的高度是由其内容来决定的。无论它里的元素是标准文档流还是浮动流。

    2、将一个元素设为float后,其标准文档流的父容器会塌陷,但如果其父容器也是浮动流的话,则不会塌陷。

    3、清除浮动只会对同级别的元素产生影响,但不会清除其父辈的浮动

  • 相关阅读:
    poj 3071 Football (概率dp)
    CF1408G Clusterization Counting
    2-sat
    线段树优化建图
    SP5971 LCMSUM
    [NOI2020]命运
    SP19149 INS14H
    Atcoder ARC-068
    CF908G New Year and Original Order
    (四)、Fiddler打断点
  • 原文地址:https://www.cnblogs.com/beast-king/p/3687266.html
Copyright © 2011-2022 走看看