浮动是我们在前端页面中经常会用到的一种布局方式。那什么是浮动呢?
首先我们先来看一下它的定义。浮动是指让元素脱离文档标准流(脱标),按照指定的方向去横向排列。浮动的取值有两个,分别是float:left;(向左浮动) float:right;(向右浮动)
那浮动都有哪些特点呢? 浮动有四个特点:(1) 可以使元素脱离标准流;(2)可以使元素改变形态,如:浮动的块标签,宽度变为内容撑开的宽度;又如sapn标签,浮动后可以设置其宽高。(3)浮动的元素顶部对齐成一行排列(也可以说,浮动的元素以前面的一个元素的底部对齐。) (4)浮动不影响前面的元素,只影响后面的元素。
现在我们来看一下它的应用场景。浮动常用于:导航条,文字环绕(浮动最开始就是为了解决这个问题出现的),浮动布局等等。
虽然运用浮动是很方便我们的页面布局,但是元素浮动后也会出现一些问题,这些问题是会影响我们继续我们下面的页面布局,所以我们要清除浮动。那么问题来了,什么叫清除浮动呢?难道是把我们在源码中写的float:left;和float:right;去掉,NO,NO,NO,当然不是!!!
清除浮动是清除由于浮动带来的不利影响。我们要明白,我们所说的清除浮动是清除浮动带来的不利影响,这是因为浮动后的元素会对后面的元素会造成影响,导致网页布局出现问题。下面我们就来说说如何清除浮动带给我们的不利影响。
清除浮动的方法总结起来有四种,分别是:父元素加高法,overflow方法,空标签法和伪元素法。我会分别进行详细介绍。
第一种方法:父元素加高法。 给父元素设置高度。 原理:子元素浮动后,脱离文档流,父元素未设置高度的话,因为其内容是0(默认是内容撑开父元素的高的,但现在子元素浮动了),故父元素高度也会变为0,导致后面的元素紧挨着父元素,与浮动元素冲突,使文档的布局出现问题。
参考代码如下:
<style>
main{
border: 1px solid black;
/*给父元素加高。不推荐使用*/
height: 302px;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
float: left;
}
section{
height: 40px;
border: 1px solid blue;
}
</style>
<body>
<main>
<div></div>
<div></div>
</main>
<section></section>
</body>
第二种方法:overflow方法。 在父元素中加overflow:hidden;
参考代码如下:
<style>
main{
border: 1px solid black;
/*在父元素中加overflow:hidden;,但是这种方式也不推荐使用*/
overflow:hidden;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
float: left;
}
section{
height: 40px;
border: 1px solid blue;
}
</style>
<body>
<main>
<div></div>
<div></div>
</main>
<section></section>
</body>
第三种方法:空标签法。也可以称之为内墙法或外墙法,使用时选择下面代码中的其中一种即可,但这种空标签法也不推荐使用。(其中的行内样式也可以写在页内样式style中或外部CSS样式文件中。)
参考代码如下:
<style>
main{
border: 1px solid black;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
float: left;
}
section{
height: 40px;
border: 1px solid blue;
}
</style>
<body>
<main>
<div></div>
<div></div>
<!--内墙法-->
<aside style="clear: both"></aside>
</main>
<!--外墙法-->
<!--<aside style="clear: both"></aside>-->
<section></section>
</body>
第四种方法:伪元素法。 强烈推荐使用此方法。 因为伪元素这种方法没有在源码中写多余的代码标签,且可以在页面布局中重复使用。重复使用时,只需定义一个class类,然后给需要清除浮动的标签加上class=""就OK了。
参考代码如下:
<style>
main{
border: 1px solid black;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
float: left;
}
section{
height: 40px;
border: 1px solid blue;
}
main::after{
content: "";
display: block;
clear: both;
}
</style>
<body>
<main>
<div></div>
<div></div>
</main>
<section></section>
</body>
以上就是我对浮动的一些肤浅认识,如有错误,还希望各位博友帮忙指正哦!
PS:这是我写的第一个博客哦,很开森!!!