zoukankan      html  css  js  c++  java

  • CSS浮动与清浮动

    浮动 （ float css属性）

    　　float ： left right

    Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

    http://www.w3schools.com/css/css_float.asp

    浮动可以让元素在容器中尽量向左或者向右push移动， 这样其他元素会围绕浮动元素，

    所谓的其他元素就是浮动元素后面的非浮动元素， 浮动影响的对象之后的元素，这个先后是指元素标签位置的先后次序；并不是展示出来的次序，由于浮动的存在，展示出来的次序，可以不是实际元素标签的顺序，例如 有这种代码 （div[float:left] div[float:right] div）， 最后一个div的内容显示在 第一个 和 第二个div之间， 给人眼错觉好像是实际上的第三个div看起来是第二个。

    The elements after the floating element will flow around it.

    The elements before the floating element will not be affected.

    浮动最初用作 图片周边 有文字围绕效果，后来普遍为布局使用。

    清浮动需求

    float元素实际上是脱离了HTML文档流，浮动元素的高度是不被外层容器元素计算的，

    如果浮动元素仅仅被后续的元素围绕了高度的一半，这个时候添加一个新div块， 要求这个新块能够 在浮动元素的下方一行显示，

    按照浮动的实现效果， 新添加的 div块为了实现围绕效果， 还是会从浮动元素的一半开始显示新添加的div。

    很多布局情况，要求多个块能够按照float的push排列，同时又能够让float元素像正常的文档元素一样，可以在文档流中被计算高度。

    要是实现这个效果，需要引入清浮动  clear。

    清浮动理解

    clear : left right both

    清浮动，就是把之前元素的浮动状态删除，按照正常文档流元素高度来解析之前元素。

    w3.org官方的解释是：「元素盒子的边不能和前面的浮动元素相邻」。

    The clear property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

    http://zzstudy.offcn.com/archives/14575 这个解释的有点意思， float元素，可以理解为边框围绕， 则元素盒子的边必然与浮动元素相邻，清浮动，就是要破除这种相邻， 跟浮动元素不相邻，换行显示。

    left -- 是指清浮动元素的 左边框 不能与前面的 浮动元素的边相邻。

    right -- 是指清浮动元素的 右边框 不能与前面的 浮动元素的边相邻。

    both -- 是指清浮动元素的 左边框 和 右边框 不能与前面的 浮动元素的边相邻。

    注释： 这里的左右边是指 清浮动 元素 的 左右边框，  不是指 此元素标签位置 的 左边（前边） 和 右边（后边）

    记住所有清浮动元素， 要清理的浮动属性， 是针对此元素标签位置前面的浮动标签元素。

    上面说的不能相邻是总体上说法，但是怎样不能相邻，看w3c自己的即使最透彻：

    http://www.w3.org/wiki/CSS/Properties/clear

    • left
      Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.


    • right
      Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.


      • both
        Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

    W3C清浮动例子

     下面网站提供的一个清浮动，分两行显示图片，每一行都向左对齐。

    http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear 

    <!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
}

.text_line {
    clear: left;
    margin-bottom: 2px;
}
</style>
</head>
<body>

<h3>Image Gallery</h3>
<p>Try to resize the browser-window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">

<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<div>iiiiiii</div>
</body>
</html>
     

    自研clear清左右例子

    前面设置了两个浮动块div，左右浮动，  第三个div设置clear各种值（left right both none）， 以观察各种情况下的清浮动情况。

    同时为了能看出，清左 和 清右 的效果， 将第一个浮动div 设置高度为 100px， 第二个浮动div高度设置为 200px。

    建议亲自运行下， 可容易看出 clear left 和 rigt 效果。

    <html>
<head>
        <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
        <style>
.clear {
     clear: both;
}
        </style>
</head>
<body>

<h1>left + left => clear none</h1>
<div style="float:left;200px;height:100px;background:green">这个是第1列，</div>
<div style="float:left;400px;height:200px;background:grey">这个是第2列，</div>
<div style="text-align:left; background:yellow; clear:none">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>
<div class="clear"></div>

    
<h1>left + left => clear left</h1>
<div style="float:left;200px;height:100px;background:green">这个是第1列，</div>
<div style="float:left;400px;height:200px;background:grey">这个是第2列，</div>
<div style="text-align:left; background:yellow; clear:left">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>
<div class="clear"></div>

    
<h1>rihgt + right => clear none</h1>
<div style="float:right;200px;height:100px;background:green">这个是第1列，</div>
<div style="float:right;400px;height:200px;background:grey">这个是第2列，</div>
<div style="text-align:left; background:yellow; clear:none">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>
<div class="clear"></div>

    
<h1>rihgt + right => clear right</h1>
<div style="float:right;200px;height:100px;background:green">这个是第1列，</div>
<div style="float:right;400px;height:200px;background:grey">这个是第2列，</div>
<div style="text-align:left; background:yellow; clear:right">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>
<div class="clear"></div>

    
<h1>left + right => clear none</h1>
<div style="float:left;200px;height:100px;background:green">这个是第1列，</div>
<div style="float:right;400px;height:200px;background:grey">这个是第2列，</div>
<div style="text-align:left; background:yellow; clear:none">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>
<div class="clear"></div>

    
<h1>left + right => clear left</h1>
<div style="float:left;200px;height:100px;background:green">这个是第1列，</div>
<div style="float:right;400px;height:200px;background:grey">这个是第2列，</div>
<div style="text-align:left; background:yellow; clear:left">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>
<div class="clear"></div>

    
<h1>left + right => clear right</h1>
<div style="float:left;200px;height:100px;background:green">这个是第1列，</div>
<div style="float:right;400px;height:200px;background:grey">这个是第2列，</div>
<div style="text-align:left; background:yellow; clear:right">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>
<div class="clear"></div>

    
<h1>left + right => clear both</h1>
<div style="float:left;200px;height:100px;background:green">这个是第1列，</div>
<div style="float:right;400px;height:200px;background:grey">这个是第2列，</div>
<div style="text-align:left; background:yellow; clear:both">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>
<div class="clear"></div>
</body>
</html>
  • 相关阅读:
    Docsify 如何在一个 MD 文件中嵌入另外一个文件
    集合与条件、循环语句
    字典（当索引不好用时）
    序列（列表、元组、字符串）
    变量、数据类型和运算符
    Python基础知识
    计算机基础知识
    Windows环境下Python2和Python3的安装
    操作系统基础
    计算机硬件基础知识
  • 原文地址：https://www.cnblogs.com/lightsong/p/3866964.html
Copyright © 2011-2022 走看看