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

首先我们先来看一下它的定义。浮动是指让元素脱离文档标准流(脱标),按照指定的方向去横向排列。浮动的取值有两个,分别是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中的浮动问题的更多相关文章

  1. 浅谈HTML5中canvas中的beginPath()和closePath()的重要性

    beginPath的作用很简单,就是开始一段新的路径,但在使用canvas绘图的过程中却非常重要 先来看一小段代码: var ctx=document.getElementById("can ...

  2. 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  3. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  4. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  5. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  6. 浅谈Java中的equals和==(转)

    浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str ...

  7. 浅谈Linux中的信号处理机制（二）

    首先谢谢 @小尧弟 这位朋友对我昨天夜里写的一篇<浅谈Linux中的信号处理机制(一)>的指正,之前的题目我用的“浅析”一词,给人一种要剖析内核的感觉.本人自知功力不够,尚且不能对着Lin ...

  8. 浅谈Java中的对象和引用

    浅谈Java中的对象和对象引用 在Java中,有一组名词经常一起出现,它们就是“对象和对象引用”,很多朋友在初学Java的时候可能经常会混淆这2个概念,觉得它们是一回事,事实上则不然.今天我们就来一起 ...

  9. 浅谈Java中的equals和==

    浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: String str1 = new String("hello"); String str2 = ...

随机推荐

  1. gcd-函数

    在网上看到了这个函数 int gcd(int a,int b){if(a==0) return b; if(b==0) return a; return gcd(b,a%b);} 是求最大公约数的 有 ...

  2. spring mvc 注解入门示例

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" ...

  3. CaltrainTimes从设计到发布(基于Flex的手机应用)

    资源下载地址 Caltrain Times 的 iTunes下载地址 Caltrain Times的Android Market 下载地址 Caltrain Times的BlackBerry App ...

  4. V8引擎嵌入指南

    如果已读过V8编程入门那你已经熟悉了如句柄(handle).作用域(scope)和上下文(context)之类的关键概念,以及如何将V8引擎作为一个独立的虚拟机来使用.本文将进一步讨论这些概念,并介绍 ...

  5. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第六章：管理产品图片——多对多关系（上篇）

    在这章中,我们将学习如何创建一个管理图片的新实体,如何使用HTML表单上传图片文件,并使用多对多关系将它们和产品关联起来,如何将图片存储在文件系统中.在这章中,我们还会学习更加复杂的异常处理,如何向模 ...

  6. 《JAVASCRIPT高级程序设计》第一章

    在使用调制解调器的时代,频繁的表单验证对客户端来说是一个很大的负担,javascript,作为一种专门进行表单验证的客户端脚本语言诞生了.到今天,javascript早已超越了当初设定的角色.Java ...

  7. Win下JDK的安装和简单使用教程

    下载安装 一.从官网下载 1.百度jdk 然后点击像图片中指出的那个链接(www.oracle.com是java的官网) 2.下载(先点击那个 选择框 同意许可协议) 然后根据自己的电脑选择下载 64 ...

  8. 内功心法 -- java.util.ArrayList<E> (4)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...

  9. MongoDB基础之九 replication复制集

    准备工作:创建目录 mkdir -p /home/m17 //home/m18 /home/m19 /home/mlog 1:启动3个实例,且声明实例属于某复制集 # ./bin/mongod --d ...

  10. 计算机程序的思维逻辑 (64) - 常见文件类型处理: 属性文件/CSV/EXCEL/HTML/压缩文件

    对于处理文件,我们介绍了流的方式,57节介绍了字节流,58节介绍了字符流,同时,也介绍了比较底层的操作文件的方式,60节介绍了随机读写文件,61节介绍了内存映射文件,我们也介绍了对象的序列化/反序列化 ...