对于前端初学者来说，css浮动部分的知识是一块比较难以理解的部分，下面我将把我学习过程中的心得分享给大家。

导读：

  1.css块级元素讲解

2.css中浮动是如何产生的

　3.出现浮动后，如何清除浮动（本文将涉及到多种清除浮动的方法）

博客正文：

  1.css块级元素讲解

　　常见的块级元素主要有以下几种：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>、<dir>、<hr>。

　　css中块级元素的特点：块级元素可以设置宽高，如果不设置的话，默认为父容器的宽高；总是在新行上开始并且独占一行；高度，行高以及外边距和内边距都可控制；可以容纳内联元素和其他块元素；

　2.css中浮动是如何产生的

　　在网页布局中为了布局更美观，布局更方便，于是我们不可避免的要使用元素浮动，在css中我们使用float来设置浮动。下面我们来详细讲解浮动：

　　请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

　　

　　如下图所示，如果父容器的包含框太窄，将三个元素都设置为浮动后，如果水平排列的三个浮动元素超出包含框的宽度，那么排在后面的浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，最前面的元素高度高于后面被挤下来的元素，那么当它们向下移动时可能被其它浮动元素“卡住”：

　　　　　

   在实际开发中设置完浮动后，有的时候我们需要清除浮动，一次我们需要了解clear属性。

　　3.出现浮动后，如何清除浮动（本文将涉及到多种清除浮动的方法）　　　　

清除浮动的语法：

　　clear : none | left | right | both

取值：

　　none  :  默认值。允许两边都可以有浮动对象

　　 left   :  不允许左边有浮动对象

　　 right  :  不允许右边有浮动对象

　　 both  :  不允许有浮动对象

　　牢记：css浮动的规则只能影响使用的元素本身，不会影响其他元素。

　　在实际讨论清除浮动前我们先讨论下为什么要清除浮动，首先看一下下面的例子，有助于更好地理解为什么要清除浮动：

　　　

　　　代码如下：

　　　　　<!DOCTYPE html>
　　　　　<html>
          <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
             .div1{width: 200px;height: 200px;background: orange; float: left;}
             .div2{width: 200px;height: 200px;background: green; float: left;}
             .div3{width: 200px;height: 200px;background: red; float: left;}
             .outer{border: 1px solid #ccc;background: #fc9;color: #fff;}
           </style>
          </head>
          <body>
            <div class="outer clear-outer">
              <div class="div1">1</div>
              <div class="div2">2</div>
              <div class="div3">3</div>

　　　　　　　<div class="clear">3</div>
            </div>
          </body>
          </html>
　　　未清除浮动带来的影响主要有以下三点;

              1、背景不能显示

       　　 2、边框不能撑开

　　　　    3、margin padding设置值不能正确显示
　　清除浮动的方法：

　　方法一：

　　　　.clear{clear:both; height: 0; line-height: 0; font-size: 0}

　　方法二：父级div定义 overflow: auto　

　　　　.clear-outer{

    　　　　  overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题

　　　　}

　　方法三：

　　　.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
　　　　.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

　　　　这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

　　　清除浮动后的效果展示如下：

　　

　总结：

　　清除浮动的方式虽然是有很多种，但是不是每种都适合你，也不是每种都能很好的兼容所有浏览器，所以参照你觉得最好的方式去做，个人觉得方法三不错，不需多于的标签，而且也能很好的兼容。

　　

详细解读css中的浮动以及清除浮动的方法的更多相关文章

  1. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  2. css中：overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  3. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  4. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  5. CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  6. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  7. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  8. CSS浮动与清除浮动(overflow)例子

    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...

  9. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

随机推荐

  1. MarkDown 语法及使用

    MarkDown #什么是Markdown - 定义 - markdown 是一款轻量级标记语言,功能没有HTML标记语言那么强大 ,Markdown专注书写! #试用人群: 程序员/等计算机爱好者 ...

  2. Linux系统学习之 一：新手必须掌握的Linux命令1

    2018-10-03 16:04:12 一.常用系统工作命令 1.wget 命令 作用:用于在终端中下载网络文件. 格式:wget [参数] 下载地址 参数及作用: -b : 后台下载模式 -d:显示 ...

  3. Flask - 路由系统

    目录 Flask - 路由系统 @app.route()装饰器中的常用参数 methods : 当前 url 地址,允许访问的请求方式 endpoint:反向url地址,默认为视图函数名(url_fo ...

  4. Python-程序的控制结构

    程序的分支结构 >单分支结构 根据判断条件结果而选择不同向前路径的运行方式 if <条件>: <语句块> 代码示例: guess = eval(input()) if g ...

  5. The Morning after Halloween uva1601

    这道题思路还是比较清晰的,建图加bfs或双向bfs,其实后者比前者少了将近一半的时间.. 建图可以把某一点所拥有邻接点长度(数目)记录在数组0这个位置,因为这道题使用vector会超时. #inclu ...

  6. Spring学习总结（4）——Spring AOP教程

    一.概念 AOP(Aspect Oriented Programming):面向切面编程. 面向切面编程(也叫面向方面编程),是目前软件开发中的一个热点,也是Spring框架中的一个重要内容.利用AO ...

  7. 洛谷 P2827 BZOJ 4721 UOJ #264 蚯蚓

    题目描述 本题中,我们将用符号表示对c向下取整,例如:. 蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓. 蛐蛐国里现在共有n只蚯蚓(n为正整数).每只 ...

  8. [bzoj1704][Usaco2007 Mar]Face The Right Way 自动转身机_贪心

    Face The Right Way 自动转身机 bzoj-1704 Usaco-2007 Mar 题目大意:不想描述题意系列++... ...题目链接 注释:略. 想法:我们直接枚举k,然后从左往右 ...

  9. 洛谷——P2722 总分 Score Inflation

    https://www.luogu.org/problem/show?pid=2722 题目背景 学生在我们USACO的竞赛中的得分越多我们越高兴. 我们试着设计我们的竞赛以便人们能尽可能的多得分,这 ...

  10. [CSS3] Make a horizontal-scrolling Menu

    Our web app on desktop may use elements that use great deal of width. On many occasions we can’t sim ...