问题：在练习过程中，发现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. Android NDK R9 安装配置 无需Cygwin

    转自:http://www.cr173.com/soft/66623.html NDK是一个工具集,可让您实现您的应用程序使用本机代码的语言,如C和C + +.Android NDK 是在SDK前面又 ...

  2. 【ActiveMQ入门-11】ActiveMQ学习-compositeDestination

    概要: 前一章讲解了消费者如何通过通配符来匹配目的地,以实现一个消费者同时接收多个目的地的消息. 对于生产者来讲,可能存在下面的需求: 1. 同一条message可能要发送到多个Queue: 2. 同 ...

  3. bzoj4928: 第二题

    Description 对于一棵有根树,定义一个点u的k-子树为u的子树中距离u不超过k的部分. 注意,假如u的子树中不存在距离u为k的点,则u的k-子树是不存在的. 定义两棵子树是相同的,当且仅当不 ...

  4. java操作Excel之POI（4）利用POI实现数据的批量导出

    后台导出方法: /** * 后台导出方法 * 利用POI实现数据的批量导出 */ public String export() throws Exception{ Connection con = n ...

  5. MyEclipse中复制web项目，部署之后访问报错

  6. 学习笔记之Bitbucket

    Bitbucket | The Git solution for professional teams https://bitbucket.org/ Git Tutorials and Trainin ...

  7. Python软件开发规范

    bin  整个程序的执行路口    start.py conf 配置文件     setting.py lib   库  模块与包    common.py    sql.py core  核心逻辑  ...

  8. (转)android系统开发 AP 和 BP 简要说明

    手机的AP和BP根据上下文可以指代硬件和软件两种意思.  1) 大多数的手机都含有两个处理器.操作系统.用户界面和应用程序都在Application Processor(AP)上执行,AP一般采用AR ...

  9. HTML5中对于网络是否断开的检测.很有意思哦

    //事件的封装 var EventUtil = { addHandler: function (element, type, handler) {//注册事件 if (element.addEvent ...

  10. 原生态的javascript的n种技巧(我从别人的博客中拷贝过来的,方便以后查阅)

    1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...