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. 【leetcode】870. Advantage Shuffle

    题目如下: 解题思路:几千年前,一个古人曾经解过这个题目,他的名字叫做田忌,后人称他的解题思想叫做“田忌赛马”.言归正传,本题就是一个田忌赛马的问题,先将A与B进行排序,然后判断A[0]与B[0]的大 ...

  2. Oracle12c修改时区

    Oacle12c支持可插入数据库(PDB)在一个统一的数据库(CDB)中具有不同的字符集.时区文件版本和数据库时区. 出于性能原因,Oracle建议将数据库时区设置为UTC(0:00),因为不需要转换 ...

  3. 新功能初探 | MySQL 8.0 Multi-Valued Indexes功能简述

    顾名思义,索引上对于同一个Primary key, 可以建立多个二级索引项,实际上已经对array类型的基础功能做了支持,并基于array来构建二级索引.这意味着该二级索引的记录数可以是多于聚集索引记 ...

  4. 如何查看本机上安装的.NET Framework版本

    在开始菜单选择"运行", 或者快捷键 “windows键+R” 在命令窗口输入regedit.exe,打开注册表 在注册表中定位到如下节点 HKEY_LOCAL_MACHINE\S ...

  5. php range()函数 语法

    php range()函数 语法 作用:创建一个包含指定范围的元素的数组.dd马达哪家好 语法:range(low,high,step) 参数: 参数 描述 low  必需.规定数组的最低值. hig ...

  6. 51nod 1514 美妙的序列 分治NTT + 容斥

    Code: #include<bits/stdc++.h> #define ll long long #define mod 998244353 #define maxn 400000 # ...

  7. [UOJ211][UER #6]逃跑

    题意:从原点出发,走\(n\)次,每次往四个方向中随机一个走,走每个方向有个概率,求所有方案走到过的点数的方差. 题解:orz kczno1 \(E*all=\sum (a_i-avg)^2*all= ...

  8. Python_010(迭代器)

    一.函数名的运用 1.函数名的内存地址 def func(): print("英雄联盟") print(func) #输出结果: <function func at 0x00 ...

  9. 20180802-Java 方法

    Java 方法 下面的方法包含2个参数num1和num2,它返回这两个参数的最大值. /** 返回两个整型变量数据的较大值**/ public static int max(int num1,int ...

  10. Fiddler抓包工具-拦截，断点

    1.拦截网页 先拦截请求-F11设置拦截 -F12抓包 2.修改金额 宽带 下行:100M上行:8M 一般家用的都是下行高,企业用都是上下行对等.企业要搭建网站就需要上行. 我们去访问网站,服务器根据 ...