CSS浮动与清浮动

时间 2020-06-22 标签 css 浮动

浮动（ float css属性）

　　float ： left right
javascript

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

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

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

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

The elements after the floating element will flow around it.ajax

The elements before the floating element will not be affected.api

浮动最初用做图片周边有文字围绕效果，后来广泛为布局使用。app

清浮动需求

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

若是浮动元素仅仅被后续的元素围绕了高度的一半，这个时候添加一个新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 效果。