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. simulate 中的一些操作

    1. neutralize: position based 的alpha int neutralize(int di, int ti) { ; ; ; ; ii < nsyms; ++ii) { ...

  2. 英语单词character

    来源——tr帮助说明 TR() User Commands TR() NAME tr - translate or delete characters SYNOPSIS tr [OPTION]... ...

  3. php array_intersect()函数 语法

    php array_intersect()函数 语法 作用:用于比较两个(或更多个)数组的键值,并返回交集.直线电机生产厂家 语法:array_intersect(array1,array2,arra ...

  4. BZOJ 3306: 树 LCT + set 维护子树信息

    可以作为 LCT 维护子树信息的模板,写的还是比较优美的. 本地可过,bzoj 时限太紧,一直 TLE #include<bits/stdc++.h> #define setIO(s) f ...

  5. 170817关于AJAX的知识点

    1.AJAX                  [1] AJAX简介                        全称: Asynchronous JavaScript And XML        ...

  6. LightOJ 1342 Aladdin and the Magical Sticks [想法题]

    题目链接 : http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27050 --------------------------- ...

  7. machine learning 之 Recommender Systems

    整理自Andrew Ng的machine learning 课程 week 9. 目录: Problem Formulation(问题的形式) Content Based Recommendation ...

  8. DR 项目小结

    前言 个人的项目总结, 非技术类博文. 需要补充的知识点 HTTP 协议与其内置方法 curl 指令和各选项的意义 Keystone 认证流程和各项目配置文件 [keystone_authtoken] ...

  9. jmeter之ServerAgent监控资源

    对linux服务器的服务进行压测时,服务器的运行情况可以通过添加插件来观察,而不用使用top命令实时的去看 1.资源准备 2.环境准备 3.资源监控 1.资源准备 可通过该网址下载jmeter所有插件 ...

  10. WEB服务端安全---认证会话与访问控制

    一.认证与会话管理 认证:简而言之就是通过一定的凭证认出用户是谁.认证过程中按凭证数量可简单分为 ‘单因素认证’.‘双因素认证’或多因素认证.一般来说,多因素认证强度更高,但是用户体验上会比单因素认证 ...