问题：在练习过程中，发现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. react组件的创建

    最近项目接触react和rn,之前会一些vue和小程序,起初写react是很难受的,尤其是jsx的写法,不过2周过后感觉写起来有点舒服了... 目前react的组件一共有3种方式:React.crea ...

  2. ApacheKylin笔记

    基本没有什么难度,只要照着官网上配置就行,这里有以下几点需要注意: HBase一定要用2.0以下的,切记.否则会报找不到方法的错误! 需要配置修改kylin.properties文件里的spark配置 ...

  3. java web程序 上机考试登陆界面设计实现

    今天是java web上机.做一个登陆注册的界面.要求:jsp.mysql数据库,js做一个美观的界面.功能.可以添加 更多啊.我做的界面被老师狠狠的扣了分.问题在于.当用户没有输入任何信息(没有输入 ...

  4. 2018-2019 20165226 Exp5 MSF基础应用

    2018-2019 20165226 Exp5 MSF基础应用 目录 一.实验内容说明及基础问题回答 二.实验过程 Task1 主动攻击实践 ms08_067 ms17_010 Task2 针对浏览器 ...

  5. java实验——将100-300之间的素数输出

    public class 实验1 { //将100-300之间的素数输出 /** * @param args */ public static void main(String[] args) { / ...

  6. 1001 A+B Format （20 分）

    1001 A+B Format (20 分) Calculate a+b and output the sum in standard format -- that is, the digits mu ...

  7. [UE4]代理事件（C++）

    用宏定义类似格式: DECLARE_DELEGATE //普通代理 DECLARE_DYNAMIC_DELEGATE_TwoParams //动态代理 DECLARE_DYNAMIC_MULTICAS ...

  8. linux上很方便的上传下载文件工具rz和sz使用介绍

    简单说就是,可以很方便地用这两个sz/rz工具,实现Linux下和Windows之间的文件传输(发送和接收),速度大概为10KB/s,适合中小文件.rz/sz 通过Zmodem协议传输数据   一般来 ...

  9. 第8章 信号（1）_Linux信号处理机制

    1. 信号的基本概念 1.1 基本概念 (1)信号(signal)机制是linux系统中最为古老的进程之间的通信机制,解决进程在正常运行过程中被中断的问题,导致进程的处理流程会发生变化. (2)信号本 ...

  10. Lunce编程模型

    问题的场景: 解决方案:都是来自于科技论文 ============================================================================== ...