eg：三个div，父级div下面有两个div分别float:left和float:right

 <style>

     .container{width:400px;border:3px soild red;}

     .fl{float:left;}

     .fr{float:right;}

 </style>

 <body>

     <div class="container">

         <div class="fl">向左浮动</div>

         <div class="fr">向右浮动</div>

     </div>

 </body>

副作用：

1、背景不能显示 由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

解决方法：

　　一、子div末尾加上<div style="clear:both"></div>；

　　二、父div加上overflow:hidden属性。（由于overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。推荐使用）

css3 清除浮动的更多相关文章

  1. CSS3中三种清除浮动（float）影响的方式

    float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0 ...

  2. 1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  3. float包裹性与破坏性及清除浮动几种方法

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  4. 细微之处：比较两种CSS清除浮动的兼容

    http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮 ...

  5. CSS（一）解析浮动塌陷与清除浮动

    清除浮动方法 1.对父级设置适合CSS高度,父级元素撑开并且包含子元素. <p>固定高度</p> <div style="height: 50px;" ...

  6. 详解 清除浮动 的多种方式（clearfix）

    说明 本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 : ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. 详说 CSS 清除浮动

    转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...

  9. CSS基础必备盒模型及清除浮动

    盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...

随机推荐

  1. /usr，/usr/local/ 还是 /opt 目录区别

    Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的 /us(Unix Software Resource)r:系统级的目录,可以理解为C:/Windows/, /usr/lib ...

  2. [CSP-S模拟测试]:数字（数学+高精度）

    题目描述 很简单,给出正整数$n$,求出$n!$在十进制表示下的从最末非零位开始的总共$k$位. 输入格式 第一行一个正整数$T$,表示有$T$组数据接下来$T$行,每行两个正整数$n$和$k$. 输 ...

  3. BF语言学习

    Brainfuck是一种极小化的计算机语言,它是由Urban Müller在1993年创建的.由于fuck在英语中是脏话,这种语言有时被称为brainf*ck或brainf**k,甚至被简称为BF.这 ...

  4. ruby的实例变量

    class Box def initialize(w,h) @width,@height=w,h end def getArea @height*@width end end class BigBox ...

  5. 【大前端攻城狮之路·二】Javascript&QA⼯程师

    今天给大家分享的主题的是Javascript&QA⼯程师.看到这个主题,可能有人问:前端开发完就OK了,剩下的丢给测试就行,哪里还需要关心这些?但事实上呢,测试是前端开发非常重要的环节,也是迈 ...

  6. 交换机vlan配置

    vlan:virtual LAN  虚拟局域网 作用:通过VLAN技术,可以对局域网进行隔离,互相隔离开的局域网相互之间不能进行通信,一个VLAN为一个广播域 Vlan配置 GNS3(使用路由器来模拟 ...

  7. Normal Equation Algorithm求解多元线性回归的Octave仿真

    Normal Equation算法及其简洁,仅需一步即可计算出theta的取值,实现如下: function [theta] = normalEqn(X, y) theta = zeros(size( ...

  8. < 利用Python进行数据分析 - 第2版 > 第五章 pandas入门 读书笔记

    <利用Python进行数据分析·第2版>第五章 pandas入门--基础对象.操作.规则 python引用.浅拷贝.深拷贝 / 视图.副本 视图=引用 副本=浅拷贝/深拷贝 浅拷贝/深拷贝 ...

  9. Pikachu漏洞练习平台实验——SQL注入（四）

    1.概述 1.1发生原因 SQL注入漏洞,主要是开发人员在构建代码时,没有对输入边界进行安全考虑,导致攻击者可以通过合法的输入点提交一些精心构造的语句,从而欺骗后台数据库对其进行执行,导致数据库信息泄 ...

  10. 关于php中trim、ltrim和rtrim

    以ltrim为例 先看手册说明先 定义和用法 ltrim() 函数从字符串左侧删除空格或其他预定义字符. 语法 ltrim(string,charlist) 参数 描述 string 必需.规定要转换 ...