浮动(float)以及消除浮动流

最新推荐文章于 2021-05-28 21:33:24 发布

泽泽爱旅行

最新推荐文章于 2021-05-28 21:33:24 发布

阅读量7.5k

点赞数 10

分类专栏：技术篇文章标签：浮动(float)以及消除浮动流

本文链接：https://blog.youkuaiyun.com/qq_40860137/article/details/84196107

版权

技术篇专栏收录该内容

9 篇文章

订阅专栏

语法:float: left / right;

可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

功能:无论是display为inline,inline-block,还是block,float都可以让他站队

example:

第一种:(下面是inline-block元素)

html代码:

</div>

css代码;

margin:0;

padding:0;

list-style:none;

text-decoration:none;

}

.wrapper{

height:450px;

border:1px solid black;

}

img{

width:100px;

border:1px solid black;

}

执行结果:每个img图片之间有空隙,(下,右右空隙)

当img变成float元素,之间的空隙没有了

float会让图片向左靠齐,之间的空隙也会消失

第二种:(下面是block元素)

html代码:

</div>

css代码:

margin:0;

padding:0;

list-style:none;

text-decoration:none;

}//初始化标签多余属性,每次都得写

.wrapper{

width:350px;

height:350px;

border:1px solid black;

}

.con{

width: 100px;

height:100px;

line-height:100px;

text-align:center;

border:1px solid black;

}

执行结果:

当给每个div增加一个float为float;

执行结果为:

分析:元素设置为float:left,元素会向左浮动,如果父级的宽度不够(因为这里的div宽高为100px,父级宽高为350px,宽只能放三个div子元素),那么元素向下继续向左浮动

如果上面的div子元素设置为float:right;

执行结果变为:

分析:元素设置为float:right,元素会向右浮动,如果父级的宽度不够,那么元素向下继续向右浮动

如果元素设置为float:none或者float:inherit(此时子元素继承的是父元素的flat,因为父级没有float属性,所以子元素也会没有float属性)

浮动流以及浮动流的消除

浮动元素产生了浮动流,块级元素,看不到他们,他们分层了,产生了bfc的元素和文本类属性的元素和文本元素可以看到浮动元素

产生原因:父级包住具有浮动元素(子元素都是浮动元素),父级元素且有border属性,父级的下边框会包不住子元素,前提是父级元素不设置宽高

html代码:

</div>

css代码:

margin:0;

padding:0;

list-style:none;

text-decoration:none;

}

.wrapper{

border:1px solid black;

}

.con{

float:left ;

width: 100px;

height:100px;

line-height:100px;

text-align:center;

border:1px solid black;

}

执行结果:

在下面增加一个<div class="class" style="width:100px;height:100px;background-color:#f00;">我要自由</div>,

本来我们想这样显示:

但是却是这样显示:

是不是很搞怪

所以我们必须消除浮动流,下面及介绍集中清除浮动流的方式

第一种:在子元素最后加一个p标签

在html代码变成了:

<p></p>

</div>

css代码中增加:

clear:both;

}

缺点:在编程时不能随便增加一个结构(html标签就是结构)

第二种:父级使用伪元素(规范的)

先介绍一下伪元素,伪元素:一个标签刚出生时,在逻辑的最前面和最后面就已经有两个伪元素了,只不过不操作他,就看不到

例如在html中写一个<div>123</div>那么这个div就有div::before和div::after,这两个属性和clear:both;content=""配合使用

在css中写:

div::before{

content:"前端还是很有意思的呀"

}

div::after{

content:"是的呀";

}

执行结果:

清除浮动流:

html代码:

</div>

css代码:

margin:0;

padding:0;

list-style:none;

text-decoration:none;

}

.wrapper{

border:1px solid black;

}

.con{

float:left ;

width: 100px;

height:100px;

line-height:100px;

text-align:center;

border:1px solid black;

}

.class{

width:100px;

height:100px;

background-color:#f40;

}

.wrapper::after{

display:block;

clear:both;

content:"";

}

执行结果:

第三种:使用bfc清除浮动(将父元素变成bfc元素)

bfc(black format context)块级格式化上下文,把html中的每一个标签都当作一个盒子,每个盒子都有一套渲染规则,bfc可以通过特定的手段,改变盒子内部结构(改变盒子的语法结构)

如何触发一个盒子的bfc:

A: position:absolute;

B:display:inline-block;

C: float:left / right;

D: overflow:hidden;

这里的话把伪元素清除浮动css代码总的伪元素代码改变成:

.wrapper{

float:left;

}

执行结果:

分析:虽然父级解决了边框包住子级,但是由于父级现在是float元素,对后面的元素还是会产生影响

如果把float变成position:absolute

执行结果:

这样也不行

如果把position:absolute变成display:inline-block;

执行结果:

这样好像可以,但是因为父级是inline-block,带有文字特性,下面会有空隙,还是不行

如果把display:inline-block变成overflow:hidden

执行结果:

这个可以

注意:消除浮动流我们只用伪元素,而且如果元素设置position:absolute或者float:left/right时,那么这个元素会变成inline-block

例如:

html代码:

span本来是inline元素

css代码:

span{

position:absolute;或者float:left;

width:100px;

height:100px;

background-color:#f40;

}

执行结果:

分析:由于span标签设置了position:absolute;span本来是行级元素,不可以改变宽高,现在变成了行级块元素,可以设置宽高