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

首先我们先来看一下它的定义。浮动是指让元素脱离文档标准流(脱标),按照指定的方向去横向排列。浮动的取值有两个,分别是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. Mac 安装Rudy环境 pod安装前的准备工作

    之前已经说过怎么使用pod 今天说一下安装pod之前的准备工作 首先呢就是Rudy 环境(前提是你已经安装了Xcode) 在终端输入一下命令 期间可能也许会要你输入密码 curl -L https:/ ...

  2. 第一部分 记事本搞定第一个C#程序和编译过程剖析

    记事本搞定第一个C#程序 进行下面三个步骤:编码,编译和托管运行. 1.记事本进行编码: using System; class Program{ public static void Main() ...

  3. pureMVC简单示例及其原理讲解一(开篇)

    pureMVC是一个MVC框架,皆在最大限度的减少MVC间的耦合性.本人刚刚接触pureMVC时感到一头雾水,不知从何入手,也不知道从何学习.好在本人有耐性且能看懂英文技术文档,面向对象的编程能力也比 ...

  4. Round-Robin负载均衡算法及其实现原理

    毫无疑问,随着互联网.移动网络接入成本的降低,互联网正在日益深入地走入我们的生活,越来越成为人们获取信息的高效平台,ICP行业也顺势呈现出强劲的成长趋势,成为互联网迅猛发展形势下最大的受益者,也直接促 ...

  5. redis&rabbitMQ安装

    前言: 学习python已经有一段时间了,最近在学twisted(博客:twisted安装),redis,rabbitMQ感觉有点难度,所以还是写下博客整理下. 一.Redis的安装 redis是一种 ...

  6. HDU 2092 整数解

    整数解 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  7. css3 3d 与案例分析

    作者:魔洁 聊到3d那我们就先聊聊空间维度,首先一维,比如一条线就是一个一维空间,连点成线在这个空间里这些点只能前进后退,二维空间就是一个平面,这时点不仅可以前进后退还可以左右移动,3维空间也可以说是 ...

  8. swift 2.0 用代码写一个简单地UIWebView

    其实写一个UIWebView 挺简单的,但是今天就被9.0 的新特性给坑了,不知道上一个项目中有没有遇到这个问题,反正是时间成了,自己也忘记了.今天还是再说一次吧. 我们先简单的创建一个UIWebVi ...

  9. 使用ViewPagerAdapter 页面引导适配器设置app启动页，引导页面的实现

    一般的app第一次安装启动的时候,都会有一个启动页面和引导页的画面,然后才进入主程序.anndroid中的ViewPagerAdapter 是一个继承与PageAdapter的 页面引导适配器.由于我 ...

  10. Cassandra 学习笔记 - 1 - 关于Cassandra

    摘要 - Cassandra 的历史 Cassandra能做什么 Apache Cassandra最早是Facebook为了改进他们的Inbox搜索功能,由Avanash Lakshman和Prash ...