金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 浮动元素与边距合并,如何清除元素浮动

浮动元素与边距合并,如何清除元素浮动

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-12-08 14:02

CSS 深入理解之 float 浮动

2018/05/25 · CSS · float

原文出处: micstone   

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有”刨根问底”的精神,这样在出现一些问题的时候才不至于”手慌脚乱”!因此,今天就特别整理和总结一下float属性。

float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念:
文档流:在html中文档流即为元素从上至下排列的顺序。
脱离文档流:元素从正常的排列顺序被抽离。
最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding)。

题目点评

CSS魔法堂:说说Float那个被埋没的志向

2016/05/10 · CSS · 2 评论 · float

本文作者: 伯乐在线 - ^-^肥仔John 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

1. float介绍

CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离,相当于不占据任何空间,所以文档中普通流中的元素表现的就像浮动元素不存在一样,因此,设置float属性的后会影响我们的页面布局。具体说来就是:让block元素无视float元素,让inline元素像流水一样围绕着float元素实现浮动布局

float属性设计的初衷:仅仅是让文字像流水一样环绕浮动元素,就像下图中展示的一样:

图片 1

参考: [https://www.w3cplus.com/css/float.html]

本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的。

前言

定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了;2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征,若有纰漏望各位指正。

2. float的特性

float有哪些有意思的特性呢?具体如下:

  • 包裹性
  • 高度塌陷
  • 块状化
  • 没有任何margin合并

下面将详细阐述这几点的含义。

1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素的特征:

答题思路

被埋没的志向——文字环绕

回忆一下我们一般什么时候会想用浮动呢?是多列布局还是多列布局呢:)?其实它向往的却是这个
图片 2
它想干的就是这个——文字环绕,而且CSS2中除了浮动外没有其他属性可实现上述的效果。
那到底如何理解它的实现原理呢?下面我们采取分步剖析的方式来深入探讨吧!

2.1 包裹性

所谓”包裹性”,其实是由”包裹”和”自适应”两部分组成。假设有以下CSS代码:

/* CSS代码 */ .father{ border: 1px solid deeppink; width: 200px; } .son { float: left; font-size: 0; border: 1px solid blue; padding: 5px; } .father img { width: 128px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 200px;
}
.son {
    float: left;
    font-size: 0;
    border: 1px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

1)包裹。本例中将浮动元素父元素宽度设置为200px,浮动元素的子元素是一个128px宽度的图片,则此时浮动元素宽度表现为”包裹”,也就是里面图片的宽度128px。

/* HTML代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> </div> </div>

1
2
3
4
5
6
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
</div>

 图片 3

 

2)自适应性。在浮动子元素的中增加一些文字:

/* HTML代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span> </div> </div>

1
2
3
4
5
6
7
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
        <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span>
    </div>
</div>

此时,浮动元素宽度就自适应父元素的200px宽度,最终的宽度表现也是200px。如下图所示:

图片 4

  • 浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示。

  • 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐,但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐。

  • 浮动元素后面的内联元素会向此浮动元素的外边距靠齐。

可以先回答在工作上常用的清除方法,并说明为什么使用它,然后在讲一些其它的清除方法来说明你的思维广阔,知识丰富的一面。 浮动的方式有以下4种

切断关联看Float

‘float’
Value: left | right | none | inherit
Initial: none
Applies to: all
Inherited: no
当设置float:left后,元素对应的margin left edge会尽可能向所属的containing block的左边框靠近,若同一行中存在位于左侧的元素设置了float:left,则即会尽可能向该兄弟元素的margin right edge靠近.

XHTML

<div style="background:#06F;width:200px;height:100px;position:relative;left:20px;"> <div style="background:#1F0;width:50px;height:50px;float:right;"></div> <div style="background:#F60;width:50px;height:50px;float:right;"></div> </div>

1
2
3
4
<div style="background:#06F;width:200px;height:100px;position:relative;left:20px;">
  <div style="background:#1F0;width:50px;height:50px;float:right;"></div>
  <div style="background:#F60;width:50px;height:50px;float:right;"></div>
</div>

图片 5
(由于float:left突出不了效果,因此采用float:right作例子。其中蓝色区域就是containing block范围,绿和红色块采用向右浮动)
当设置浮动后,display:inline的实际值将被改写为display:block,因此不要再为display:inline;height:100px;line-height:0;float:left导致盒子content height为100px感到惊讶了。也不要为即使剩余空间不足以存放整个display:inline;float:left盒子,导致整个盒子下移到下一行排版而惊讶了.(若为Normal flow则会根据white-spacing、word-wrap和word-break决定盒子内部分内容换行,而不是整个盒子换行)简单来说并不是float:left让盒子具有不为五斗米折腰的气质,而是display:block的功劳,又由于浮动的盒子会以水平方向排版,因此我们可以以display:inline-block来理解浮动定位的水平排版和换行行为。

XHTML

<div style="background:#06F;width:200px;height:100px;"> <span style="background:yellow;width:100px;height:50px;float:left;">I'm span</span> <span style="background:#F01;width:110px;height:50px;float:left;">I'm span too</span> </div>

1
2
3
4
<div style="background:#06F;width:200px;height:100px;">
  <span style="background:yellow;width:100px;height:50px;float:left;">I'm span</span>
  <span style="background:#F01;width:110px;height:50px;float:left;">I'm span too</span>
</div>

图片 6
当设置浮动后,虽然display的实际值为block但就width:auto而言,我认为display更像是采用inline-block,宽度由子元素决定。这就是包裹性了!
(float:right同理,只是方向不同而已)
注意:在仅考虑浮动元素本身的前提下,float:left的效果与display:inline-block而父容器direction:ltr的效果是一样的,不同的是浮动元素不纳入父容器高度的计算当中

XHTML

<div style="border:solid 1px #06F;"> <span style="background:#F01;float:left;">float:left</span> </div> <br clear="both"/><br/> <div style="border:solid 1px #06F;"> <span style="background:#F01;display:inline-block;">float:none</span> </div>

1
2
3
4
5
6
7
<div style="border:solid 1px #06F;">
  <span style="background:#F01;float:left;">float:left</span>
</div>
<br clear="both"/><br/>
<div style="border:solid 1px #06F;">
  <span style="background:#F01;display:inline-block;">float:none</span>
</div>

图片 7

2.2 高度塌陷

float属性有一个著名的特性:会让父元素的高度塌陷。如章节2.1中的效果图,父元素div的高度并没有被子元素撑开(粉色区域),这种效果可以称为”高度塌陷“。导致高度塌陷的原因是因为浮动元素脱离了正常的文档流,则div.father认为其没有子元素,所以产生了高度塌陷。后文中将讲述如何解决高度塌陷的问题。

对父元素的影响:对于其父元素来说,元素浮动之后,它脱离当前正常的文档流,所以它也无法撑开其父元素,造成父元素的塌陷。

 
1.使用clear:both清除浮动

头痛的开始——基于Normal flow看Float

用割裂的方式理解float并不难,难就难在结合Normal flow看Float。下面我们一起来探讨吧!警告,前方高能,前方高能!!

2.3 块状化

块状化的意思是,一旦元素float的属性不为none,则其display计算值就是block或者table。举个例子:

/* JavaScript代码 */ var span = document.createElement('span') document.body.appendChild(span) console.log('1.' + window.getComputedStyle(span).display) // 设置元素左浮动 span.style.cssFloat = 'left' console.log('2.' + window.getComputedStyle(span).display)

1
2
3
4
5
6
7
/* JavaScript代码 */
var span = document.createElement('span')
document.body.appendChild(span)
console.log('1.' + window.getComputedStyle(span).display)
// 设置元素左浮动
span.style.cssFloat = 'left'
console.log('2.' + window.getComputedStyle(span).display)

在控制台中的结果如下:

1.inline 2.block

1
2
1.inline
2.block

不知道大家有没有跟我一样的疑问:既然设置float后,元素就块状化了,那么怎么还能产生包裹性的效果呢?回答这个问题,需要重新阐述下块状化的意思,这里的块状化意思是可以像block元素一样设置宽和高,并不是真正的块元素。

因此,没有任何理由出现下面的样式组合:

span{ display: block; /* 多余 */ float: left; } span{ float: left; vertical-align: middle; /* 多余 */ }

1
2
3
4
5
6
7
8
span{
    display: block; /* 多余 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 多余 */
}

对其他浮动元素的影响:同一个方向的浮动元素:当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时,它会紧跟在它们后面。
反方向的浮动元素:互不影响,位于同一条水平线上,当空间不够时会被挤下。

示例1:使用div

以Normal flow为基础

不管是Absolute positioning还是Float均以Normal flow作为定位基础,也就是说先假设有一个虚拟盒子以Normal flow进行定位,然后在这个基础上添加Float的特性并影响其他盒子的布局。而浮动定位对于盒子自身而言仅影响其在水平方向上的定位,因此对于inline-level box而言其垂直方向上的定位并没有发生变化,而对于block-level box而言因Collapsing margins的失效有可能会引起垂直方向上的移动。
图片 8

XHTML

<div style="background:#0f6;width:200px;height:50px;margin-bottom:50px;"></div> <div style="background:#f06;width:200px;height:50px;margin:50px 0;"></div> <div style="background:#06F;width:200px;height:50px;margin-top:50px;float:left;">float:left</div>

1
2
3
<div style="background:#0f6;width:200px;height:50px;margin-bottom:50px;"></div>
<div style="background:#f06;width:200px;height:50px;margin:50px 0;"></div>
<div style="background:#06F;width:200px;height:50px;margin-top:50px;float:left;">float:left</div>

值得注意的是,浮动定位的虚拟盒子实际上是不占空间的。因此才有后续的浮动闭合和清除浮动的事。

2.4 没有任何的margin重叠

在这里,我们将.son类增加margin:10px样式,在浏览器中查看实际效果。

/* HTML 代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> </div> <div class="son"> <img src="../../lib/img/mm1.png"> </div> <div class="son"> <img src="../../lib/img/mm1.png"> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
/* HTML 代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
</div>

图片 9

我们增加.son类的margin为10px,在浏览器中查看相邻的.son元素的空白区域的高度是20px,可以发现设置了float属性的元素没有任何的margin重叠,这和普通的元素margin重叠不一样。

对普通元素的影响:如果兄弟元素为块级元素,该元素会忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素。
如果如果兄弟元素为内联元素,则元素会环绕浮动元素排列。

 

压榨line box

图片 10
文字环绕很明显就是活生生地把文字向两边挤,为”大哥”留下个位置,而且小弟们不要走太远,必须时刻拥护着大哥。那大哥是如何圈住小弟们的呢?那得借助外力——line box。文字是以字形(glyph)的形式渲染,和它同一行的inline-level boxes均位于同一个line box中。而line box可谓是夹在containing block和浮动盒子之间勉强生存。
图片 11

XHTML

<div style="overflow:hidden;line-height:1.5;background:#06F;"> <img src="john.png" style="float:left;margin:10px"/> These days it takes a diverse and complex collection of components to power a web browser. <img src="john.png" style="float:right;margin:10px"/>It’s fair to think of all those parts coming together as a single piece of machinery, and we often talk about our web platform as an “engine”. </div>

1
2
3
4
<div style="overflow:hidden;line-height:1.5;background:#06F;">
<img src="john.png" style="float:left;margin:10px"/>
These days it takes a diverse and complex collection of components to power a web browser. <img src="john.png" style="float:right;margin:10px"/>It’s fair to think of all those parts coming together as a single piece of machinery, and we often talk about our web platform as an “engine”.
</div>

若line box的宽度不足以容纳glyph和inline-level boxes时,会在下方产生N个新的line boxes并在必要时拆分inline-level boxes,然后将glyph和inline-level boxes分布到各行的line boxes当中。

3. float与流体布局

使用float可以通过破坏正常的文档流实现CSS环绕,但是却带来了”高度塌陷”的问题!然而我们可以利用float破坏正常文档流的特性实现一些常用的布局:

  • 文字环绕变身-中间内容居中,左中右布局

直接看例子:

<div class="box"> <a href="javascript:;" class="fl">左青龙</a> <a href="javascript:;" class="fr">右白虎</a> <h3 class="text-center">标题</h3> </div>

1
2
3
4
5
<div class="box">
    <a href="javascript:;" class="fl">左青龙</a>
    <a href="javascript:;" class="fr">右白虎</a>
    <h3 class="text-center">标题</h3>
</div>

.box{ background-color: #f5f5f5; } .fl{ float: left; } .fr{ float: right; } .text-center{ text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
.box{
    background-color: #f5f5f5;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.text-center{
    text-align: center;
}

从下图中看出,实现了中间内容居中的左中右布局。

图片 12

  • 文字环绕的衍生-单侧固定
&lt;div class="box"&gt; &lt;a href="javascript:;"
class="fl"&gt;左青龙&lt;/a&gt; &lt;a href="javascript:;"
class="fr"&gt;右白虎&lt;/a&gt; &lt;h3
class="text-center"&gt;标题&lt;/h3&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384a3401669605-1" class="crayon-line">
&lt;div class=&quot;box&quot;&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-2" class="crayon-line crayon-striped-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fl&quot;&gt;左青龙&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-3" class="crayon-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fr&quot;&gt;右白虎&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-4" class="crayon-line crayon-striped-line">
    &lt;h3 class=&quot;text-center&quot;&gt;标题&lt;/h3&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-5" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

.father{ border: 1px solid #444; overflow: hidden; } .father > img { width: 60px; height: 64px; float: left; } .girl { /* 环绕和自适应的区别所在 */ margin-left: 70px; }

1
2
3
4
5
6
7
8
9
10
11
12
.father{
    border: 1px solid #444;
    overflow: hidden;
}
.father > img {
    width: 60px; height: 64px;
    float: left;
}
.girl {
    /* 环绕和自适应的区别所在 */
    margin-left: 70px;
}

和文字环绕效果相比,区别就是.girl多了一个margin-left: 70px,同时图片的宽度设置60px,因此不会发生文字环绕的效果。这里,我们也可以不使用margin-left,改用border-left或者padding-left都可以达到改变content box的尺寸,从而实现宽度自适应布局效果。

图片 13

对文字的影响:文字会环绕浮动元素排列。

html代码

脚踩block-level box

相对line box,block-level box就显得不屈不挠了。width:auto时其宽度始终保持占满containing block宽度的态度。但位于同一个stacking context中的浮动定位的盒子虽然和常规流中的盒子拥有相同的z-index(都是auto),但浮动定位的盒子拥有额外的优先级,导致它总位于常规流中的盒子之上。(关于分层显示的内容可参考《CSS魔法堂:你真的理解z-index吗?》)
图片 14

XHTML

<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div> <div style="background:#06f;width:200px;height:100px;"></div>

1
2
<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div>
<div style="background:#06f;width:200px;height:100px;"></div>

4. float的克星

既然使用float属性会带来一系列的问题,那么有没有办法消除这些问题呢?答案是:肯定有。接着看下文。

2.清除浮动指什么? 如何清除浮动? 两种以上方法。
清楚浮动指解决浮动父容器高度塌陷问题。
清除浮动的方法可以分成两类:
一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素.
解决方法:
1.使用带clear属性的空元素,在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。

css代码

通过创建BFC翻身做主人

同样是盒子,为啥你就可以在我上面呢?你有Float罩着,我也找弄个新的BFC来跟你抗衡。我们知道通过float:left|rightposition:absolute|fixeddisplay:inline-block|table-cell|table|table-captionoverflow:auto|scroll|hidden均可让盒子产生新的BFC。而产生BFC的盒子间天生排斥彼此。(但可通过后天的努力position:relative让他们又互有交集^_^)
那现在的问题是采用Normal flow定位模式的会产生新的BFC的盒子到底是紧跟在Float定位盒子的后面,还是另起一行呢?答案是两者都有可能,具体看剩余的宽度是否足以容纳该盒子。其实就是如同设置父容器产生BFC,而该盒子采用Float定位模式。不信,你看

XHTML

<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div> <div style="background:#06f;width:200px;height:100px;overflow:hidden;"></div>

1
2
<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div>
<div style="background:#06f;width:200px;height:100px;overflow:hidden;"></div>

图片 15

4.1 clear属性

在CSS中可以使用clear来清除float属性带来高度塌陷等问题,使用格式如下:

clear: none | left | right | both

1
clear: none | left | right | both
  • none:默认值,允许两边都有浮动对象;
  • left:不允许左侧有浮动对象;
  • right:不允许右侧有浮动对象;
  • both:两侧不允许有浮动对象。

如果单从字面上的意思来理解,clear:left应该是”清除左浮动“,clear:right应该是”清除右浮动“,实际上,这种说法是有问题的,因为浮动一直还在,并没有清除!只能清除浮动带来的影响。

官方对clear属性的解释是:“元素盒子的边不能和前面的浮动元素相邻”。注意这里的”前面的”3个字,也就是clear属性对”后面的”浮动元素是不闻不问的。clear属性只能清除元素的自身,不能影响其他的元素。接着看下面的这个例子:

/* HTML代码 */ <div class="box1"></div> <div class="box2"></div>

1
2
3
/* HTML代码 */
<div class="box1"></div>
<div class="box2"></div>

/* CSS代码 */ .box1 { float: left; width: 100px; height: 60px; padding: 10px; border: 3px solid black; background: url("../../lib/img/mm1.png") center no-repeat; } .box2 { border: 3px solid red; padding:10px; width:100px; height: 60px; background: url("../../lib/img/mm2.jpg") center no-repeat; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

图片 16

如上图所示,box1元素为设置了左浮动,已经脱离了正常的文档流,所以box2能够在box1的底层显示。如果想让box2能够换行排列,则只需要在.box2类中增加clear:left样式即可。如下图所示:

图片 17

<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
<div style="clear:both;"></div>
</div>

<div class="box">

是”浮动闭合”还是”清除浮动”?

我想各位都看过各种版本的clearfix实现,而最简单粗暴的方式就是添加一个<div style="clear:both"></div>来清除浮动。我还听过另一个名称——”浮动闭合”,那到底两者有什么区别呢?在作区分之前我们先要明确问题的本身。
对于height:auto的容器而言,我们希望它能恰好包裹着所有子元素,但不幸的是采用浮动定位模式的子元素将不纳入父容器的高度计算当中,那就会出现子元素戳穿父容器的风险。
从之前的内容我们了解到文字和inline-level boxes会环绕Float定位的盒子,而block-level box则被它踩在脚下。但现在希望后续盒子不再与Float定位的盒子有任何瓜葛。
面对这两种需求,我们分别得出”浮动闭合”和”清除浮动”两套方案。

4.2 clear属性的不足

clear属性只对块级元素有效,但是::after等伪元素默认都是内联水平,因此,在实际工作中,我们常常使用下面的代码来清除浮动带来的影响:

.clear::after{ content: ""; display: table;/*也可以是'block'或者是'list-item'*/ clear: both; }

1
2
3
4
5
.clear::after{
    content: "";
    display: table;/*也可以是'block'或者是'list-item'*/
    clear: both;
}

由于clear:both作用的本质是让自己不和float元素在一行显示,并不是真正意义上的清除浮动,因此float元素有一些不好的特性依然存在,表现在:

  • 如果clear:both元素前面的元素就是float元素,则设置margin-top无效;
/* HTML代码 */ &lt;div class="box1"&gt;&lt;/div&gt; &lt;div
class="box2"&gt;&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384b8874186375-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384b8874186375-1" class="crayon-line">
/* HTML代码 */
</div>
<div id="crayon-5b8f69ec384b8874186375-2" class="crayon-line crayon-striped-line">
&lt;div class=&quot;box1&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384b8874186375-3" class="crayon-line">
&lt;div class=&quot;box2&quot;&gt;&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .box1 { float: left; width: 100px; height: 60px; padding: 10px; border: 3px solid black; background: url("../../lib/img/mm1.png") center no-repeat; } .box2 { clear: both; margin-top: -20px; border: 3px solid red; padding:10px; width:100px; height: 60px; background: url("../../lib/img/mm2.jpg") center no-repeat; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    clear: both;
    margin-top: -20px;
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

在本例中,设置.box2中的margin-top没有任何的效果,如下图所示:
图片 18

  • clear:both后面的元素依旧可能会发生文字环绕现象。
&lt;div class="father"&gt; &lt;div class="float"&gt; &lt;img
src="../../lib/img/mm1.png"&gt; &lt;/div&gt;
&lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
&lt;/div&gt; &lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384bf922765024-1" class="crayon-line">
&lt;div class=&quot;father&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-2" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;float&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-3" class="crayon-line">
        &lt;img src=&quot;../../lib/img/mm1.png&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-4" class="crayon-line crayon-striped-line">
    &lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-5" class="crayon-line">
    &lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-6" class="crayon-line crayon-striped-line">
&lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-7" class="crayon-line">
&lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .father{ border: 1px solid deeppink; width: 500px; height: 70px; } .father:after{ content: ''; display: table; clear: both; } .float{ float: left; } .father img { width: 60px; height: 70px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 500px;
    height: 70px;
}
.father:after{
    content: '';
    display: table;
    clear: both;
}
.float{
    float: left;
}
.father img {
    width: 60px;
    height: 70px;
}

在本例中,设置clean:both来阻止浮动对后面元素的影响,但是最后的错位效果依然发生了(可以设置.father的字体大小为0,然后设置p标签的字体大小解决错误的问题)。

图片 19

由此可见,clear:both只能在一定程度上消除浮动的影响,要想完美去除浮动元素的影响,借助其他的手段——BFC,接着看下文。

2.使用CSS的float,overflow,display,position属性。float为 left|right,overflow为hidden|auto|scroll,display为 table-cell|table-caption|inline-block,position为 absolute|fixed,例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

 <div class="div"></div>

浮动闭合

就是让height:auto的父容器包裹所有子元素,包括Float定位的子元素。方式很简单,就是好让父容器产生BFC。

5. CSS世界的结界——BFC

<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>

 <div class="clear"></div>

清除浮动

就是为浮动影响的范围划边界。方式也很简单,就是以一个clear:left|right|both的盒子作为边界即可,其实就是引入空隙(clearance)。
首先clear属性仅对block-level box有效clear:left表示盒子的margin-left-edge不与浮动盒子接触,而clear:right表示盒子的margin-right-edage不与浮动盒子接触,clear:both自然是左右两条margin-edge均不与浮动盒子接触啦。有点虚,直接看疗效吧!

XHTML

<div style="float:left;width:200px;height:50px;background:#06F;">float:left</div> <div style="clear:left;width:200px;height:50px;background:#F60;">clear:left</div> <div style="float:right;width:200px;height:50px;background:#06F;">float:right</div> <div style="clear:right;width:200px;height:50px;background:#F60;">clear:right</div>

1
2
3
4
<div style="float:left;width:200px;height:50px;background:#06F;">float:left</div>
<div style="clear:left;width:200px;height:50px;background:#F60;">clear:left</div>
<div style="float:right;width:200px;height:50px;background:#06F;">float:right</div>
<div style="clear:right;width:200px;height:50px;background:#F60;">clear:right</div>

图片 20

简单地说就是float:leftclear:left来清除,float:rightclear:right来清除。而我们会发现一个怪异的现象,那就是设置clear:left|right|both的盒子的border top edge紧接着Float定位盒子的margin bottom edge,其实这是clearance来作祟。当设置clear:left|right|both的盒子A的border top edge与Float定位盒子B的margin box重叠时,那么就会在A的margin box和border top edge之间引入clearance,恰好让A的的border top edge恰好不与B的margin bottom edge重叠。

XHTML

<div style="margin-bottom:50px;background:#06F;height:100px;width:200px;float:left;"></div> <div style="margin-top:50px;border: solid 10px red;height:50px;width:200px;clear:left;"></div>

1
2
<div style="margin-bottom:50px;background:#06F;height:100px;width:200px;float:left;"></div>
<div style="margin-top:50px;border: solid 10px red;height:50px;width:200px;clear:left;"></div>

图片 21

5.1 BFC的定义

BFC全称block formatting context,中文为”块级格式化上下文“。BFC的表现原则为:如果一个元素具有BFC,那么它的内部子元素再怎么翻江倒海,都不会影响外部的元素。因此,BFC元素是不可能发生margin重叠的,另外,BFC元素也可以用来清除浮动的影响。

那么满足什么条件才会有BFC呢?只要满足下面任意一个条件就会触发BFC:

  • html根元素;
  • float的值不为none;
  • overflow的值为auto、scroll或者hidden;
  • display的值为table-cell、table-caption和inline-block中的任何一个;
  • position的值不为relative和static;

触发BFC后,就不需要使用clear:both属性去清除浮动的影响。

3.使用CSS的:after伪元素,给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素清理浮动。
/方法1/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}

</div>

.clearfix方案

不管是浮动闭合也好,清除浮动也罢,我们的目的往往是两者结合——Float定位的范围与Normal flow定位的范围分明,且采用Normal flow的父容器包裹所有子元素。那么可归结为Normal flow的父容器包裹所有子元素。因此得到如下的HTML Markup

XHTML

<div class="container clearfix"> <!-- Float定位的范围 --> </div> <!-- Normal flow定位的范围 -->

1
2
3
4
<div class="container clearfix">
   <!-- Float定位的范围 -->
</div>
<!-- Normal flow定位的范围 -->

而具体的方案如下:
方案1

CSS

.clearfix::after{ content: "."; display: block; clear: both; line-height: 0; visibility: hidden; } .clearfix{ *zoom: 1; /*for IE5.5/6/7*/ }

1
2
3
4
5
6
7
8
9
10
.clearfix::after{
  content: ".";
  display: block;
  clear: both;
  line-height: 0;
  visibility: hidden;
}
.clearfix{
  *zoom: 1; /*for IE5.5/6/7*/
}

伪元素after表示创建一个display:block,innerText是content属性值的元素作为该元素的最后一个子元素。注意content属性值不能为空白,否则无法清除浮动。
方案2

CSS

.clearfix::after{ content: "u200B"; /*通过零宽空白字符,省略visibility属性*/ display: block; clear: both; line-height: 0; } .clearfix{ *zoom: 1; /*for IE5.5/6/7*/ }

1
2
3
4
5
6
7
8
9
.clearfix::after{
  content: "u200B"; /*通过零宽空白字符,省略visibility属性*/
  display: block;
  clear: both;
  line-height: 0;
}
.clearfix{
  *zoom: 1; /*for IE5.5/6/7*/
}

注意:若页面不是采用UTF-8编码方式,那么u200B表示的将不是零宽空白字符,从而导致方案2出问题。
方案3
由Nicolas Gallagher大湿提出的

CSS

.clearfix::before, .clearfix::after{ content: ""; display:table; } .clearfix::after{ clear: both; } .clearfix{ *zoom: 1; /*for IE5.5/6/7*/ }

1
2
3
4
5
6
7
8
9
10
.clearfix::before, .clearfix::after{
  content: "";
  display:table;
}
.clearfix::after{
  clear: both;
}
.clearfix{
  *zoom: 1; /*for IE5.5/6/7*/
}

这里有2个奇妙的地方:

  1. 通过display:table让即使content为空白时,也能独占据一行,且高度为0;(原理是display:table会生成一个block-level box包裹着伪元素after)
  2. 通过伪元素before消除父容器margin-top与第一个Normal flow的子元素的margin-top产生margin collapsing效果。

5.2 BFC的作用

  • 清除margin重叠
/* HTML 代码 */ &lt;div class="parent"&gt; &lt;p&gt;item
1&lt;/p&gt; &lt;p&gt;item 2&lt;/p&gt; &lt;p&gt;item 3&lt;/p&gt;
&lt;p&gt;item 4&lt;/p&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384c6137798626-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384c6137798626-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384c6137798626-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384c6137798626-1" class="crayon-line">
/* HTML 代码 */
</div>
<div id="crayon-5b8f69ec384c6137798626-2" class="crayon-line crayon-striped-line">
&lt;div class=&quot;parent&quot;&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-3" class="crayon-line">
    &lt;p&gt;item 1&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-4" class="crayon-line crayon-striped-line">
    &lt;p&gt;item 2&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-5" class="crayon-line">
    &lt;p&gt;item 3&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-6" class="crayon-line crayon-striped-line">
    &lt;p&gt;item 4&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-7" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS 代码 */ .parent{ width: 300px; background-color: black; overflow: hidden; } p { background-color: white; margin: 10px 0; text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
/* CSS 代码 */
.parent{
    width: 300px;
    background-color: black;
    overflow: hidden;
}
p {
    background-color: white;
    margin: 10px 0;
    text-align: center;
}

在这种情况下,出现了margin重叠的效果。如下图所示:

图片 22

利用BFC能消除margin重叠,谨记:只有当元素在同一个BFC中时,垂直方向上的margin才会clollpase。如果它们属于不同的BFC,则不会有margin重叠。因此我们可以再建立一个BFC去阻止margin重叠的发生。所以为了让他们的margin变成20px,我们只需要用div,建立一个BFC,令p元素处于不同BFC即可。请看例子:

/* HTML 代码 */ <div class="parent"> <p>item 1</p> <p>item 2</p> <p>item 3</p> <p>item 4</p> </div>

1
2
3
4
5
6
7
/* HTML 代码 */
<div class="parent">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
    <p>item 4</p>
</div>

从下图中可以看出,借助BFC消除了margin重叠的问题。

图片 23

  • 清除高度塌陷的问题

在上面的章节中,如果子元素设置浮动属性,则父元素就会出现高度塌陷的问题。在这里,我们可以借助BFC消除高度塌陷的问题了,请看下面的这个例子:

/* HTML代码 */ <div style="border: 1px solid deeppink;width: 200px; overflow: hidden"> <img src="../../lib/img/mm1.png" style="border: 1px solid blue; float: left"> </div>

1
2
3
4
/* HTML代码 */
<div style="border: 1px solid deeppink;width: 200px; overflow: hidden">
    <img src="../../lib/img/mm1.png" style="border: 1px solid blue; float: left">
</div>

从下图中可以看到,设置overflow:hidden样式后就产生了BFC,根据BFC的表现规则,内部元素的样式不会影响外部元素的样式,因此没有出现高度塌陷的问题。

图片 24

  • 自适应布局(阻止文本换行)
/* HTML代码 */ &lt;div class="parent"&gt; &lt;img
src="../../lib/img/mm1.png"&gt; &lt;p
class="girl"&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫4,&lt;/p&gt;
&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384d4712979455-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384d4712979455-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384d4712979455-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384d4712979455-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384d4712979455-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384d4712979455-1" class="crayon-line">
/* HTML代码 */
</div>
<div id="crayon-5b8f69ec384d4712979455-2" class="crayon-line crayon-striped-line">
&lt;div class=&quot;parent&quot;&gt;
</div>
<div id="crayon-5b8f69ec384d4712979455-3" class="crayon-line">
    &lt;img src=&quot;../../lib/img/mm1.png&quot;&gt;
</div>
<div id="crayon-5b8f69ec384d4712979455-4" class="crayon-line crayon-striped-line">
    &lt;p class=&quot;girl&quot;&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫4,&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384d4712979455-5" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .parent{ border: 1px solid deeppink; width: 200px; font-size: 0; } .parent img{ border: 1px solid blue; float: left; } .girl{ /*overflow: hidden;*/ font-size: 12px; background-color: #cdcdcd; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* CSS代码 */
.parent{
    border: 1px solid deeppink;
    width: 200px;
    font-size: 0;
}
.parent img{
    border: 1px solid blue;
    float: left;
}
.girl{
    /*overflow: hidden;*/
    font-size: 12px;
    background-color: #cdcdcd;
}

如果我们给.girl元素设置具有BFC特性的属性,如:overflow: hidden就可以实现更健壮、更智能的自适应布局。

图片 25

这里的.girl元素为了不和浮动元素产生任何交集,顺着浮动边缘形成自己的封闭上下文。

普通元素在设置了overflow:hidden后,会自动填满容器中除了浮动元素意外的剩余空间,形成自适应效果,这种自适应布局和纯流体布局相比:

  • 自适应内容由于封闭而更加健壮,容错性更强;
  • 自适应内容能够填满除浮动元素以外区域,不需要关心浮动元素宽度。

/方法2/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}

.box{ width:300px;margin:0 auto;border:10px solid #000;}

浮动真的是定位模式的一员吗?

我们可以通过position属性来设置Normal flow或Absoluting positioning,但却要通过float属性来设置Float,这让我一度怀疑Float到底是不是定位模式的一员呢?
我是这样理解的,Normal flow(包括Relative positioning)与Absoluting positioning是非我即你的关系,而Float和Relative positioning则是可叠加影响定位效果的关系,显然必须另设一个属性来设置更恰当。

6. 结语

本文是我学习float属性总结文章,可能存在理解准确的地方,欢迎大家在评论区评论,指点迷津,大家互相帮助,互相进步。

最后,希望本文的内容能够对您对float的理解能够有所帮助,感谢阅读。

3.有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
CSS有三种定位方式:absolute定位,relative定位和fixed定位。

.div{ width:200px;height:200px;background:red;float:left;}

期待更美的文字环绕

有没有发现通过float:left|right我们仅能得到要么图片靠左要么图片靠右的文字环绕效果,那如果我们希望得到如下的四周环绕的效果呢?
图片 26
虽然已有案例是通过absolute positioning模拟出类似的效果,但布局排版固定导致无法适应大部分场景。如果有个float:both属性值那该多好啊!另外大家是否觉得以下的环绕效果更有艺术范呢?
图片 27
听说通过CSS3的shapes特性可以实现四周环绕和上面非四四方方的环绕效果,日后好好研究研究!
2016/04/19补充-参考《CSS网站布局实录-基于Web标准的网站设计指南(第2版)》的5.2.2 不规则文字环绕
图片 28

XHTML

<style type="text/css"> .article{ font-size: 14px; line-height: 1.5; text-align: justify; } .figure{ position: absolute; z-index: -1; } .figure-shape{ margin: 0; padding: 0; } .figure-shape li{ list-style-type:none; height: 1.5em; float: left; clear: left; } .figure-shape li:nth-child(1){ width: 150px; } .figure-shape li:nth-child(2){ width: 180px; } .figure-shape li:nth-child(3){ width: 180px; } .figure-shape li:nth-child(4){ width: 160px; } .figure-shape li:nth-child(5){ width: 148px; } .figure-shape li:nth-child(6){ width: 150px; } .figure-shape li:nth-child(7){ width: 148px; } .figure-shape li:nth-child(8){ width: 144px; } .figure-shape li:nth-child(9){ width: 136px; } </style> <div class="article"> <img src="./beyonce.jpg" class="figure"/> <ul class="figure-shape"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul> 初中时候语文老师说我会是个写作天才,因为我写的东西足够真实,取材身边,造句简单,用语文书垫桌脚的同时翻烂了韩寒的1988,那时督促我已经成为她的习惯。时至今日再次遇见语文老师时候我惭愧的告诉她我已经不写文了,也没有像她说的那样成为一个天才,我只能微微一笑告诉她我至少还没停下笔。 </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<style type="text/css">
.article{
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
}
.figure{
  position: absolute;
  z-index: -1;
}
.figure-shape{
  margin: 0;
  padding: 0;
}
.figure-shape li{
  list-style-type:none;
  height: 1.5em;
 
  float: left;
  clear: left;
}
.figure-shape li:nth-child(1){
  width: 150px;
}
.figure-shape li:nth-child(2){
  width: 180px;
}
.figure-shape li:nth-child(3){
  width: 180px;
}
.figure-shape li:nth-child(4){
  width: 160px;
}
.figure-shape li:nth-child(5){
  width: 148px;
}
.figure-shape li:nth-child(6){
  width: 150px;
}
.figure-shape li:nth-child(7){
  width: 148px;
}
.figure-shape li:nth-child(8){
  width: 144px;
}
.figure-shape li:nth-child(9){
  width: 136px;
}
</style>
<div class="article">
<img src="./beyonce.jpg" class="figure"/>
<ul class="figure-shape"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
初中时候语文老师说我会是个写作天才,因为我写的东西足够真实,取材身边,造句简单,用语文书垫桌脚的同时翻烂了韩寒的1988,那时督促我已经成为她的习惯。时至今日再次遇见语文老师时候我惭愧的告诉她我已经不写文了,也没有像她说的那样成为一个天才,我只能微微一笑告诉她我至少还没停下笔。
</div>

参考

张鑫旭-《CSS世界》


作者简介:

中文名:石头
英文名:micstone
某电商平台前端程序员一名,偶尔也写写后端代码,工作经历2016.7~至今。

1 赞 1 收藏 评论

图片 29

  • absolute定位:1.通过left/top/right/buttom,以具有position属性的父元素为参考进行定位。2.absolute偏移的参考点首先是父元素,然后检查该父元素是否具有position属性,若具有position属性,则以该父元素为参考点进行偏移,若不具有则继续往上一级找,直到body标签为止。3.使用场景是需要相对于父元素或者body进行定位。

  • relative定位:1.通过left/top/right/buttom,以自己的位置进行定位。2.relative偏移的参考点是自身位置,是拿偏移前的位置与偏移后的位置进行比较,比如top10px,表现出来的其实是向下移动10px。3.使用场景是偏移前的位置需要保留,不脱离文档流。

  • fixed定位:1.通过left/top/right/buttom,以浏览器窗口进行定位。2.fixed偏移的参考点是浏览器窗口。3.使用场景是固定于浏览器的某个位置不动。

.clear{ height:0px;font-size:0;clear:both;overflow: hidden;}

总结

重构了几次总算写完了,想写得清楚而又不哆嗦真心不易,继续努力:)

4.z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

示例2:使用<br clear="all">

感谢

KB011: 浮动(Floats)
KB009: CSS 定位体系概述
CS001: 清理浮动的几种方法以及对应规范说明
CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)

CS001: 清理浮动的几种方法以及对应规范说明
Faking ‘float: center’ with Pseudo Elements
说说标准——CSS核心可视化格式模型(visual formatting model)之十:控制紧接浮动的排列-clear 特性
那些年我们一起清除过的浮动

打赏支持我写出更多好文章,谢谢!

打赏作者

值 | 描述
|````|`````|
auto | 默认。堆叠顺序与父元素相等。
number | 设置元素的堆叠顺序。
inherit | 规定应该从父元素继承 z-index 属性的值。

<div class="box">

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 30 图片 31

1 赞 6 收藏 2 评论

例如:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

 <div class="div"></div>

关于作者:^-^肥仔John

图片 32

偏前端的临栈工程师 个人主页 · 我的文章 · 5 ·    

图片 33

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别。

   <br clear="all"/>

  • position:relative发生偏移后,在文档流中的位置不变。
  • 负margin会改变元素在文档流中的位置。

</div>

6.BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
BFC的全称是 Block Format Content块级格式化上下文。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

.box{ width:300px;margin:0 auto;border:10px solid #000;}

生成方法:可以对父容器添加这些属性来生成BFC:
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
作用:1. 自适应两栏布局;2.清除内部浮动;3. 防止垂直 margin 重叠。
例如2:

.div{ width:200px;height:200px;background:red;float:left;}

    <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
    </div>
</div>```

7.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例。
兄弟元素合并:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5027142-d51666bb851732ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

父子间合并:当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5027142-93f85f3d0f0a78bf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

空元素:假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5027142-3c070866a5e0451d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如果这个外边距遇到另一个元素的外边距,它还会发生合并:

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5027142-d1f6e166d2b61172.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

两个相邻的外边距都是正数时,合并结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,合并结果是两者绝对值的较大值。
两个外边距一正一负时,合并结果是两者的相加的和。

防止合并:
对于兄弟元素:设置浮动,display:inline-block或使其父元素均形成BFC可防止边距合并(如overflow:hidden)
对于父子间的元素:可以给父元素设置border或padding属性来防止合并。
对于空元素:设置border或padding属性或overflow:hidden等(形成BFC)来防止合并。



[代码1](http://js.jirengu.com/hihibiwexu)
[代码2](http://js.jirengu.com/luyozovoma)
[代码3](http://js.jirengu.com/qiciqizice)
[代码4](http://js.jirengu.com/nozivosozi)

示例3:伪类对象::after+zoom:1(推荐使用)

<div class="box clear">

 <div class="div"></div>

</div>

.box{margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}

2.使用overflow属性

html代码

css代码

<div class="box">

 <div class="div1"></div>

</div>

.box{ width:300px;border:1px solid #000;overflow:auto;}

.div1{ width:260px;height:400px;background:Red;float:left;}
注意:**overflow:auto;overflow:hidden;**都可以

 

 

 

 

3.使用display属性

html代码

css代码

<div class="box">

 <div class="div"></div>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.div{ width:200px;height:200px;background:red;float:left;}

注意:父元素不能水平居中,在父元素使用text-align:center解决   

 

 

 

 

4.父级元素浮动

html代码

css代码

<div class="box">

 <div class="div"></div>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ width:200px;height:200px;background:red;float:left;}

注意:父元素不能水平居中,可以使用定位解决    

position: relative;

left: 50%;

margin-left: -150px;

 

 

 

 

 

=

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:浮动元素与边距合并,如何清除元素浮动

关键词:

上一篇:没有了

下一篇:没有了