我们通常使用浮动来实现某些元素的布局,但是往往这些元素浮动会影响其他元素的布局,因此会产生副作用。

如果你还不清楚什么是浮动,那就点开这个链接:

http://blog.csdn.net/baidu_37107022/article/details/71515984

浮动带来的副作用

1. 块状元素,会钻进浮动元素的下面,被浮动元素所覆盖,像这样

2. 行内元素,例如文字, 则会环绕在浮动元素的周围,为浮动元素留出空间,像这样:

3. 浮动元素的父元素坍缩, 像这样:

如果我们不希望要这些效果,就需要清除浮动来解决后患,使后面的元素表现的跟浮动前一样,这样我们既实现了黄色元素浮动,又实现了后来的元素不会受其影响产生不必要的麻烦。

清除浮动的方法,见下一节内容

地址http://blog.csdn.net/baidu_37107022/article/details/71557806


一天搞定CSS: 浮动(float)的副作用--12的更多相关文章

  1. 验分享:CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

  2. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  3. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  4. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  5. 一天搞定CSS: 浮动(float)及文档流--10

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  6. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  7. 经验分享:CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  8. 经验分享:CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  9. 经验分享:CSS浮动(float,clear)通俗讲解 太棒了,清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

随机推荐

  1. jmeter读取执行case插入DB生成报表和备份记录

    前言:由于通过jmeter写的接口自动化木有数据导入和统计分析功能,因此做了2次开发,目的是读取每条case获取接口名称和用例名称,通过获取的case执行结果进行计算,得到详细接口的用例通过率存入DB ...

  2. js 不要使用new

    (1)不要使用new Array(),new Number, new String, or new Boolean. 等等 如果要新建数组,没有必要使用new Array(),使用[];原因是直观. ...

  3. SQL基础函数

    首先咱们一起来看一下SQL的基本函数 一.聚合函数 二.数学函数 三.字符串函数 四.转换函数 五.时间函数 这样子看起来可能很多,那咱们给变得---------------------------- ...

  4. CSS清除float浮动

    一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...

  5. 进程间通信系列 之 命名管道FIFO及其应用实例

    进程间通信系列 之 概述与对比   http://blog.csdn.net/younger_china/article/details/15808685  进程间通信系列 之 共享内存及其实例   ...

  6. 浅析如何在Nancy中生成API文档

    前言 前后端分离,或许是现如今最为流行开发方式,包括UWP.Android和IOS这样的手机客户端都是需要调用后台的API来进行数据的交互. 但是这样对前端开发和APP开发就会面临这样一个问题:如何知 ...

  7. map中结构体做关键字的注意事项

    序: 今天做一道题,由于递归函数比较恶心,如果用记忆化搜索,数据范围极大却又用不全(二维数组存的话直接炸).所以决定干脆使用stl::map存储(反正有O2优化),但是执行insert的时候,编译器却 ...

  8. 最准确的单点登录SSO图示和讲解(有代码范例)|手把手教做单点登录(SSO)系列之二

    写第一篇博客<手把手教做单点登录(SSO)系列之一:概述与示例>,就获得了园子里朋友们热情的评论和推荐,感谢各位. 我那篇文章同时发了CSDN和博客园.对比一下,更感受到博客园童鞋们的技术 ...

  9. Rxjava学习小记

    最近同事离职,接了个锅,里面的代码都是RxJava的味道,逼的自己不得不学习一波.看了网上的很多入门篇的博客,写的很不错.链接奉上: [Android]RxJava的使用(三)转换--map.flat ...

  10. [笔记]我的Linux入门之路 - 03.Java环境搭建

    其实ubuntu是自带一个叫openJDK的东西的,是谷歌看Oracle不爽而搞的.不过呢...总感觉不太习惯,况且我既然都来Linux了,总是想折腾一把的. 首先先检查下有没有安装java.终端输入 ...