首页 > 代码库 > 浅谈HTML5中的浮动问题

浅谈HTML5中的浮动问题

浮动是我们在前端页面中经常会用到的一种布局方式。那什么是浮动呢?

首先我们先来看一下它的定义。浮动是指让元素脱离文档标准流(脱标),按照指定的方向去横向排列。浮动的取值有两个,分别是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:这是我写的第一个博客哦,很开森!!!

 

浅谈HTML5中的浮动问题