问题：在练习过程中，发现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. Appium录制脚本520-2

    1.录制自动化脚本 场景:启动雪球,点击我的,登陆雪球,选择手机及其他登陆,输入手机号 2.使用Java进行测试Appium测试 2.1创建Java工程 file-创建maven工程-填写GroupI ...

  2. Python 天气预报+微信

    """ Description: 需要提供以下三个信息,在申请到的微信企业号当中可以找到 agentid corpid corpsecret Author:Nod Dat ...

  3. seaborn可视化特征的相关性

    import seaborn as sn sn.heatmap(trainX.corr(),vmax=1,square=True)

  4. 修改 Docker-MySQL 容器的 默认用户加密规则

    背景介绍 今天开始做集成测试,需要把程序和环境重新部署在新的服务器上.项目的环境都是基于Docker来的,所以数据库也是选择从Docker官网上面拉官方的MySQL镜像.(Tag = 8.0.12) ...

  5. 关于sencha touch在华为、红米等部分手机下hide事件失效，msgbox无法关闭的解决方案(已更新最新解决方案)

    (急着解决问题的同学可以直接跳最底部查看最终的解决方案) 问题描述 因为前段时间抢到了华为荣耀3c,所以做项目的时候就用荣耀3c测试了一下项目, 结果发现在华为的emotion ui上sencha t ...

  6. centos6性能监控软件

    常用软件在此下载 http://rpm.pbone.net/ http://pkgs.org/ collectl 显示cpu\disk\network的实时信息http://dl.fedoraproj ...

  7. Python - Django - ORM 实例（二）

    在 app01/models.py 中添加 Book 类对象表 from django.db import models # Create your models here. # 出版社 class ...

  8. 如何决定Web应用的线程池大小

    线程池(Thread Pool)在Web应用中线程池的大小决定了在任何一个时间点应用可以处理请求的并发数.如果一个系统收到的请求数超过了线程池的大小,那么超出的请求要么进入等待队列要么被拒绝.请注意, ...

  9. node进阶之用流实现上传文件

    内容: 1.文件上传基础 2.node文件处理机制 3.用流实现文件上传 1.文件上传基础 前端代码: <form action="localhost:8080/" meth ...

  10. sklearn的estimator

    estimator的工作流程 在sklearn中,估计器(estimator)是一个重要的角色,分类器和回归器都属于estimator.在估计器中有有两个重要的方法是fit和transform. fi ...