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

首先我们先来看一下它的定义。浮动是指让元素脱离文档标准流(脱标),按照指定的方向去横向排列。浮动的取值有两个,分别是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. AdapterViewFlipper的功能和用法

    AdapterView继承了AdapterViewAnimator,它也会显示Adapter提供的多个View组件,但每次只能显示一个View组件,程序可通过showPrevious和showNext ...

  2. 递归编译的Makefile的实现

    最近写了一个递归Makefile,目的是既可以实现子模块的单独编译,也可以不做任何修改就和整个程序的整体进行无缝衔接的编译.具体的思路是借助第三方文件,将子模块编译好的.o文件的路径自动写到confi ...

  3. web前端性能调优（二）

    项目经过第一波优化之后APP端已基本已经符合我们的要求了,但是TV端还是反应比较慢,页面加载和渲染都比较慢了一点,我觉的还是有必要在进行一些优化,经过前面的优化,我们的优化空间已经小了一部分,不过还是 ...

  4. python中关于字符串的操作

    Python 字符串操作方法大全 python字符串操作实方法大合集,包括了几乎所有常用的python字符串操作,如字符串的替换.删除.截取.复制.连接.比较.查找.分割等,需要的朋友可以参考下 1. ...

  5. HDU5692(线段树+dfs序）

    Snacks Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  6. DTLS 技术要点解析

    一.DTLS DTLS 是指 Datagram Transport Level Security,即数据报安全传输协议: 其提供了UDP 传输场景下的安全解决方案,能防止消息被窃听.篡改.身份冒充等问 ...

  7. Git学习之路（3）-提交文件到三个区

    ▓▓▓▓▓▓ 大致介绍 年过的差不多了,开始学习!小白学Git(持续更新) Git有三个工作区域: ◆ 工作区(Working Directory) ◆ 暂存区(Stage) ◆ 版本库(Reposi ...

  8. 模式字符串匹配问题（KMP算法）

    这两天又看了一遍<算法导论>上面的字符串匹配那一节,下面是实现的几个程序,可能有错误,仅供参考和交流. 关于详细的讲解,网上有很多,大多数算法及数据结构书中都应该有涉及,由于时间限制,在这 ...

  9. 《JAVASCRIPT高级程序设计》JSON语法/解析/序列化

    JSON是一种数据格式,不是一种编程语言. 一.语法 JSON语法可以表示以下三种类型的值:简单值.对象.数组. 1.简单值 最简单的JSON数据值就是简单值: 5 "hello world ...

  10. 背景图height：100%显示

    这段时间,写移动端页面,总是遇到背景图在不同的设备上的显示拉伸问题: 本来想写百分比,可是并没有显示,又不想media@ ,换一种思路用img写 群友提供了一个办 html,body{height:1 ...