问题：在练习过程中，发现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. 解决Qt Creator编译输出窗口乱码的问题

    设置环境变量LC_ALL为en_US. 附注:将乱码复制到文本编辑器(如Notepad++)后将编码设置为utf-8,可以看到正确的文字. 看样子是编译输出窗口的编码设置出了问题,或者是gcc的输出编 ...

  2. ELK高可用搭建---Elasticsearch配置（1）

    ########################ElasticSearch#######################环境:192.168.125.200   elasticsearch+logst ...

  3. Java网络编程（读书笔记）

    部分片段: 早期web服务器由于Http链接短暂而有所掩盖,由于web页面和嵌入式的图片一般很小(至少与通常通过FTP获取软件包要小很多),由于web浏览器在获取各个文件后挂起连接,而不是一次保持数分 ...

  4. appium 3-31603调试分析方法

    1.Appium Log 清晰记录了所有的请求和结果 @Test public void testDebug() throws InterruptedException,IOException{ Mo ...

  5. [UE4]UE4中的常见类

    一.Actor:可以放在世界中物体 二.Pawn:可以接受Controller输入的Actor 三.Character:是一个可以行走.跑.跳等行为的Pawn 四.Controller:没有物理表现的 ...

  6. [UE4]C 语言动态数组

    在实际的编程中,往往会发生这种情况,即所需的内存空间取决于实际输入的数据,而无法预先确定.对于这种问题,用静态数组的办法很难解决.为了解决上述问题,C语言提供了一些内存管理函数,这些内存管理函数结合指 ...

  7. Koa 框架整理

    学习交流 Koa使用了ES6规范的generator和异步编程是一个更轻量级Web开发的框架,Koa 的先天优势在于 generator.由于是我个人的分享交流,所以Node基础.ES6标准.Web开 ...

  8. 显示器如何显示一个YUV422格式的图形

    记录在开发过程中对知识点的一些理解: 在开发渲染程序的过程中,需要对视屏文件进行解码解码后特效文件的叠加,使用的技术是(FFmpeg+DirectX) 解码出来的视屏数据格式是YUYV,使用Direc ...

  9. CSS属性 table 的 border-collapse 边框合并

    说明 该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框 separate 缺省值.边框分开,不合并.collapse 边框合并.即如果相邻,则共用同一个边框. 虽然在DIV+ ...

  10. php metaphone()函数解析

    php metaphone() 函数计算字符串的 metaphone 键,本文章向码农们介绍 php metaphone() 函数的基本用法和实例,需要的码农可以参考一下本文章的方法和实例. 定义和用 ...