问题：在练习过程中，发现div1浮动后，它下面的div被覆盖住了。

解决方案：清除该div1的浮动。

关于CSS的浮动

1.div是块级元素，独占一行

2.浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次

3.让两个div并排放，给两个div都加上float，但是如果两个div的宽度超过上级宽度时，也会是在两行显示的。

4.清除浮动可以理解为打破横向排列，关键词是clear。语法：clear：none|left|right|both

相关资料：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

CSS的浮动（float）的更多相关文章

  1. css清除浮动float

    css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...

  2. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  3. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  4. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

  5. css 关于浮动float的使用以及清除浮动

    float:none | left | right 默认值:none 适用于:所有元素 none:设置对象不浮动left:设置对象浮在左边right:设置对象浮在右边 当该属性不等于none引起对象浮 ...

  6. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  7. css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  8. css清除浮动float的三种方法总结

    原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...

  9. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  10. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

随机推荐

  1. JVM插码之五：Java agent+ASM实战--监控所有方法执行时间

    本文建立在对instrumentation和agent有初步的了解的前提下阅读,关于这2个类的讲解在其它文章中. 这是一个maven项目,pom中需要的配置,lib中有asm的jar包 pom.xml ...

  2. android手机版本

    1.判断安卓手机是64位,还是32位 adb pull /system/bin/cat file cat 32位 64位 2.判断安卓手机CPU是64位,还是32位 adb shell getprop ...

  3. [UE4]IES光源概述文件

    IES Light Profiles(IES光源概述文件) 是一条曲线,该曲线在一段弧线中定义了光源强度,虚幻引擎4将会围绕某个轴旋转该弧线,从而使得 点光源 (和从技术上讲的 聚光源,下面会提供更多 ...

  4. 关于json_encode()的使用注意

    json_encode($json_str,true)在一般情况下可以返回一个数组,但当$json_str的字符编码是GBK或其它时,返回的是一个 空数组,必须用iconv(‘gbk’,‘ut8//I ...

  5. SQL中select与set的区别

    转自 : http://www.cnblogs.com/4mylife/archive/2012/10/25/2738466.html 下表列出 SET 与 SELECT 的区别   SELECT S ...

  6. 自己根据js的兼容封装了一个小小的js库

    var gys = function () { } //oParent父节点 //获取所有的子元素 gys.prototype.getElementChildren = function (oPare ...

  7. Apache Kudu as a More Flexible And Reliable Kafka-style Queue

    Howdy friends! In this blog post, I show how Kudu, a new random-access datastore, can be made to fun ...

  8. 安装HBase(0.9)数据库

    基本知识: 1.hbase是一种基于列存储的数据库,也就是说它的一列的数据是存储在一个文件里面的,而传统的数据库存储都是一个文件存储多个行,这些行有不同的列,这些列的数据类型 不同. 2.基于HDFS ...

  9. mysql 笔记分享

    mysql LPAD 和RPAD不足位数补齐填充函数总结一下mysql数据库的一些特征MySQL WHERE 语句优化之我见mysql limit 实例详解mysql 如何实现多表联合更新MySQL ...

  10. Python print函数参数详解

    官方文档 print(…)    print(value, …, sep=’ ‘, end=’\n’, file=sys.stdout, flush=False)    Prints the valu ...