深深明白之

作者: 前端知识  发布:2019-11-14

横向菜单排列

在之前提到的display:inline的文章详解CSS display:inline-block的应用中,我们提到了横向排列菜单的实现,最早是利用float属性来实现的,它可以很简单的实现横向菜单的效果。
HTML代码:

XHTML

<ul class="menu clearfix"> <li>首页</li> <li>政治</li> <li>娱乐</li> <li>体育</li> <li>游戏</li> </ul>

1
2
3
4
5
6
7
<ul class="menu clearfix">
     <li>首页</li>
     <li>政治</li>
     <li>娱乐</li>
     <li>体育</li>
     <li>游戏</li>
</ul>

CSS代码:

CSS

.clearfix: { zoom: 1; } .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; } .menu { background: #0094ff; width: 500px; } .menu li { float: left; width: 100px; list-style-type: none; }

1
2
3
4
.clearfix: { zoom: 1; }
     .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
.menu { background: #0094ff; width: 500px; }
     .menu li { float: left; width: 100px; list-style-type: none; }

效果图:

图片 1

横向菜单

这种方式可以很轻松的实现横向菜单效果,但需要注意的是要注意清除浮动,推荐使用display:inline-block来实现

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; /* 多余 */
}

父级元素添加overflow:hidden

这个方法的关键在于触发了BFC,BFC是CSS中的难点之一,我们以后专门来学习这个概念。现在只需要知道它可以清除浮动带来的影响。

CSS

.clearfix{overflow:hidden;zoom:1}

1
.clearfix{overflow:hidden;zoom:1}

优点:代码量少,没有额外的标签

缺点:如果子元素超出父元素的范围,会造成超出的部分被隐藏

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属性去清除浮动的影响。

基础知识

float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素。
浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。举例说明如下:
Html代码:

XHTML

<div class="box"> <span class="float-ele"> 浮动元素 </span> 普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流 </div>

1
2
3
4
5
6
<div class="box">
        <span class="float-ele">
            浮动元素
        </span>
        普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流
</div>

CSS代码:

CSS

.box { background: #00ff90; padding: 10px; width: 500px; } .float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

1
2
.box { background: #00ff90; padding: 10px; width: 500px; }
.float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果图

图片 2

float基本效果

由效果图可以看出,span元素周围的文字会围绕着span元素,而设置了float属性的span元素变成了一个块级元素的感觉,可以设置width和height属性。这是设置了float属性后的效果,关于float的详细细节,我们接下来详细讲解。

6. 结语

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

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

文字环绕效果

float最初的应用就是文字环绕效果,这对图文并茂的文章很有用。我们简单的距离说明一下:
HTML代码

XHTML

<div class="box"> <img src="1.jpg" class="float" /> 我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字 </div>

1
2
3
4
<div class="box">
         <img src="1.jpg" class="float" />
         我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字
     </div>

CSS代码:

CSS

.box { background: #00ff90; padding: 10px; width: 500px; } .float {background: #0094ff none repeat scroll 0 0;border: 1px solid red;float: left;margin-left: 5px;width: 400px;}

1
2
.box { background: #00ff90; padding: 10px; width: 500px; }  
.float {background: #0094ff none repeat scroll 0 0;border: 1px solid red;float: left;margin-left: 5px;width: 400px;}

效果图

图片 3

文字环绕效果

这样很轻松的实现了文字环绕效果。

4. float的克星

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

重叠问题

重叠问题是指两个元素再同一个位置,会出现上下重叠的问题。浮动元素如果和普通文档流发生重叠会怎么样呢?
首先浮动元素要怎么样才会发生重叠呢,设置其margin-top为负数即可。我们看看例子:
HTML代码:

XHTML

<p> <span> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。 </span> <span class="overlay"> 浮动元素重叠 </span> </p>

1
2
3
4
5
6
7
8
<p>
         <span>
             在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。
         </span>
         <span class="overlay">
             浮动元素重叠
         </span>
     </p>

CSS代码

XHTML

p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; } .overlay { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; margin-top: -30px; }

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
.overlay { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; margin-top: -30px; }

效果图如下:

图片 4

浮动元素的重叠问题

如果浮动元素不设置负margin时,是这样的
图片 5

浮动元素的重叠问题

在这个例子中,可以看到p中正常流元素span的内容会显示在浮动元素上面。
我们给设置span设置背景图片试试,效果如下:
图片 6

浮动元素的重叠问题:有背景图

元素设置背景后,重叠的部分还是会显示背景

如果是span标签换成div标签会怎么样呢?
HTML代码:

XHTML

<p> <div style="background-image:url(../images/banner1.jpg)"> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。 </div> <span class="overlay"> 浮动元素重叠 </span> </p>

1
2
3
4
5
6
7
8
<p>
      <div style="background-image:url(../images/banner1.jpg)">
          在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。
      </div>
      <span class="overlay">
          浮动元素重叠
      </span>
  </p>

效果图

图片 7

浮动元素的重叠问题:块级元素有背景图

这种情况下,重叠的部分不会显示背景图片。

总结一下这两种情况的区别:
1、行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上
2、块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上

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>

图片 8

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

float的应用

说了这么多float的原理和可能造成的问题,接下来我们就要谈谈float的应用。

5. CSS世界的结界——BFC

浮动元素的延伸性

在说浮动元素的延伸性之前,我们首先来考虑一个比较特殊的例子。
我们将span元素放在p元素内,并将其高度设置成高于p元素并且左浮动,这个例子的关键在浮动元素高度高于父元素。
HTML代码

XHTML

<p> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前, <span class="high-float"> 浮动元素比父级元素高 </span> </p> <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p>

1
2
3
4
5
6
7
<p>
         在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,
         <span class="high-float">
             浮动元素比父级元素高
         </span>
     </p>
     <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p>

CSS代码

CSS

p { margin-top: 20px; margin-bottom: 20px; background-color: #00ff21; width: 500px; } .high-float { float: left; height: 80px; line-height: 80px; background-color: orangered; }

1
2
p { margin-top: 20px; margin-bottom: 20px; background-color: #00ff21; width: 500px; }
.high-float { float: left; height: 80px; line-height: 80px; background-color: orangered; }

效果图

图片 9

浮动元素高度大于父级元素

在这个例子中,浮动元素高度高于父元素,可以看到浮动元素超出了父元素的底端。
这种情况要怎么解决呢,只要将父元素也设置成浮动即可,我们将第一个p元素设置成左浮动,效果如下
图片 10

浮动元素延伸性

将父元素p设置成float:left后,浮动元素就会被包含到父元素里面,我们将这个特性成为浮动元素的延伸性。
浮动元素的延伸性是什么呢,我们可以将其理解为元素被设置成浮动后,该元素会进行延伸进而包含其所有浮动的子元素

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>

 图片 11

 

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。如下图所示:

图片 12

浮动元素超出父级元素的padding

在前面提到的第一条规则:浮动元素的外边界不会超过父级元素的内边界。大部分情况下,我们见到的场景都是符合的。但是有一些特殊情况。
(1)负margin
我们将浮动元素的margin-left设置成负数。
HTML代码:

XHTML

<p> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前, <span class="minus-margin"> 负margin-left </span> </p>

1
2
3
4
5
6
<p>
     在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,
     <span class="minus-margin">
         负margin-left
     </span>
</p>

CSS代码:

CSS

p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 500px; } .minus-margin { float: left; height: 80px; line-height: 80px; background-color: orangered; margin-left: -20px; }

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 500px; }
.minus-margin { float: left; height: 80px; line-height: 80px; background-color: orangered; margin-left: -20px; }

效果图

图片 13

负maring的浮动元素

将margin-left设置成负数之后,浮动的子元素明显超出了父元素的内边界,这难道不是违反了第一条规则吗?
但仔细想想,这其实是合理的,因为默认情况下marign-left就是0,所以不会超出父元素的内边界,但是将其设置成负数之后,就相当于浮动元素覆盖了自己的内边界一样。
我们在从数学的角度来看看这个问题,这个例子中:
父元素的margin-left:50px,padding和border默认为0,即内边界所在距离浏览器左侧的位置为50px。
浮动的子元素默认情况下距离浏览器左侧的像素应该为50px,但是将其设置成margin-left:20px后,浏览器会进行计算:
50px (-20px)margin 0border 0padding=30px。距离浏览器左侧更近,所以超出了父元素。

(2)浮动元素宽度大于父级元素宽度
如果我们将浮动元素的宽度设置大于父级元素,效果会如何呢?
元素左浮动,width大于父级元素
HTML代码

XHTML

<p> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前, <span class="big-width"> width大于父级元素 </span> </p>

1
2
3
4
5
6
<p>
     在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,
     <span class="big-width">
         width大于父级元素
     </span>
</p>

CSS代码

CSS

p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; } .big-width { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; }

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
.big-width { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; }

效果图

图片 14

大width的浮动元素

将浮动元素左浮动,并且宽度超出父级元素时,由于浮动元素宽度较大,它会超过父级元素的右内边界
如果将其设置成右浮动,情况又会怎么样呢?
图片 15

大width的浮动元素

可以看到,设置成右浮动后,会超出父级元素的左内边界。

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;
}

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

图片 16

  • 文字环绕的衍生-单侧固定
&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的尺寸,从而实现宽度自适应布局效果。

图片 17

清除浮动

清除浮动是一个经常提到的东西,首先我们要理解使用浮动会带来什么问题,以及为什么要清除浮动。
我们知道,一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。要解决这样的问题,我们就是要使用清除浮动。
清除浮动有很多方法,下面我们一一说明每一种方法。

对于IE浏览器来说,要清除浮动带来的问题,只需要触发器hasLayout就可以,直接设置样式zoom:1就可以触发。关于hasLayout的知识,这里暂不详述,以后我们专门来讲讲这个东西,感兴趣的同学可以先查查相关资料。

对于非IE浏览器,主要有下面几种方法:

2.2 高度塌陷

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

本文由金沙澳门官网发布于前端知识,转载请注明出处:深深明白之

关键词: 金沙澳门官网

上一篇:图解 React
下一篇:没有了