问题：在练习过程中，发现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 Support Library(23.0.1)

    在搭建React-Native开发环境的时候,使用Android Sdk Manager无法找到Android Support Library这一项. 所以google了一下,找到了解决办法. 访问A ...

  2. 用 tornado 做网站 (7)

    转自:http://wiki.jikexueyuan.com/project/start-learning-python/309.html 用 tornado 做网站 (7) 到上一节结束,其实读者已 ...

  3. VS：error C3872: '0xe044': this character is not allowed in an identifier解决方法

     从网上粘贴代码到编译器中直接编译的话,会报这个错误,但是代码看上去是没有问题的,实际的原因是因为我们粘贴代码的时候粘贴了中文字符进来. 解决方法:就是把这段代码放到记事本里,选择替换把中文输入空 ...

  4. spring的Ioc容器与AOP机制

    为什么要使用Spring的Ioc容器? 1.首先,spring是一个框架,框架存在的目的就是给我们的编程提供简洁的接口,可以使得我们专注于业务的开发,模块化,代码简洁,修改方便. 通过使用spring ...

  5. django-类装饰器method_decorator

    import os from django.shortcuts import render from django.contrib.admin.views.decorators import staf ...

  6. uva-10129-欧拉通路

    题意:每一个单词的长度最小2,最大1000,单词开头的字母和另外一个单词的末尾一样就可以连接起来,解所有的单词是不是都可以连接起来,没有遗漏的 把每一个单词的第一个字母当成一个结点,最后一个单词也作为 ...

  7. 我对if(!this.IsPostBack)的理解

    if(!this.IsPostBack) { } 通常用在page_load中,获取一个值,该值指示该页是否正为响应客户端回发而加载,或者它是否正被首次加载和访问,如果是为响应客户端回发而加载该页,则 ...

  8. shiro 没有权限异常处理

    <bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"> ...

  9. Win10 C盘根目录权限

    cmd管理员运行 icacls c:\ /setintegritylevel M c盘属性,安全,完全控制.

  10. UI5-文档-4-Walkthrough

    在本教程中,我们将向您介绍SAPUI5的所有主要开发范例. 我们首先向您介绍基本的开发范例,如模型M-视图V-控制器C,并为我们的应用程序建立一个最佳实践结构.我们将以经典的“Hello World” ...