浮动概述：浮动，指的是元素标签使用float属性。应用float属性的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动的本质是让文字围绕图片，但现在很多时候使用浮动进行布局。但使用float属性进行布局也会带来一些问题，下面举例说明。

1.使用float进行布局但需要clear的实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>DIV布局--float属性</title>

</head>

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;text-align:center;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>菜单</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

版权 © runoob.com</div>

</div>

</body>

</html>

2.使用float布局但不进行clear的实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>DIV布局--float属性</title>

</head>

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;text-align:center;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>菜单</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

内容在这里</div>

<div id="footer" style="background-color:#FFA500;text-align:center;">

版权 © runoob.com</div>

</div>

</body>

</html>

3.分析：

事实上这两段代码并没有什么不同，只是在最后的一个div中少了“clear:both”，少了清理操作。由于浮动的框不在普通文档流中（与position:absolute不同，虽然两者都使元素脱离文档流，但使用float属性的元素还会在文档流中占据一个位置），没有进行清理操作，最后一个div#footer块框将div#menu与div#content当成不存在

一样。所以它的高度等于200px+21px=221px。再截个图对比就可以看得更明显了：

4.对浮动（float）更加深入细致的研究可以参考下面的资料，而且目前还存在一个问题，为什么文字环绕float的图片而不被覆盖呢？这里貌似可以找到答案。

https://www.zhangxinxu.com/wordpress/2010/01/css-float%e6%b5%ae%e5%8a%a8%e7%9a%84%e6%b7%b1%e5%85%a5%e7%a0%94%e7%a9%b6%e3%80%81%e8%af%a6%e8%a7%a3%e5%8f%8a%e6%8b%93%e5%b1%95%e4%b8%80/

https://www.zhangxinxu.com/wordpress/2010/01/css-float%e6%b5%ae%e5%8a%a8%e7%9a%84%e6%b7%b1%e5%85%a5%e7%a0%94%e7%a9%b6%e3%80%81%e8%af%a6%e8%a7%a3%e5%8f%8a%e6%8b%93%e5%b1%95%e4%ba%8c/

CSS--浮动（float）布局的更多相关文章

  1. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  2. 验分享：CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

  3. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  4. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  5. 经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  6. 经验分享：CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  7. 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  8. （转）经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  9. css浮动--float/clear通俗讲解（转载）

    本文为转载 (出处:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程开始: 首先要知道,div是块级元素,在页面 ...

  10. (转)经验分享：CSS浮动(float,clear)通俗讲解

    文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...

随机推荐

  1. mybatis框架入门程序：演示通过mybatis实现数据库的模糊查询操作

    1. mybatis的基本准备操作见我的上一篇博文:https://www.cnblogs.com/wyhluckdog/p/10149480.html 2. 根据用户名查询用户信息: (1)映射文件 ...

  2. 解决virtualbox共享文件夹没有访问权限的问题

    Virtualbox是一款免费试用的虚拟机软件.基本功能完全可替代需要购买或crack的VMware. 在Windows主机上用Virtualbox搭建Linux虚拟机,虚拟机和主机之间传递文件最方便 ...

  3. [Java] 通过XPath获取XML中某个节点的属性

    /** * Get PA Url * @author jzhang6 * @return url */ public String getPAUrl(){ String PAUrl = "& ...

  4. Djanjo 的app 模板路径 静态文件 完整版登录 新手三件套 以及orm

    一: django中app的概念: 一个项目可以包含多个应用(app,类似于模块,主页打开多个模块就是多个app) 创建了app,要在配置文件中注册 二:模板路径配置: 1 templates文件夹 ...

  5. ManualResetEvent,AutoResetEvent说明

    相信不少人对ManualResetEvent,AutoResetEvent的状态比较晕,下面是本人认为最精简的理解 1.只有2种状态,终止态 And 非终止态 终止状态,既然是状态那么一定对应事物,这 ...

  6. ScreenCapture-HDwik5.0整合教程

    示例下载:http://yunpan.cn/Q9qzFmf6sF57z 1.上传ScreenCapture文件夹 2.上传upload.php文件 2.1修改upload.php路径 3.修改Scre ...

  7. C++笔记16之const的用法总结

    const主要是为了程序的健壮型,减少程序出错. 最基本的用法: const int a=100; b的内容不变,b只能是100也就是声明一个int类型的常量(#define b =100) int  ...

  8. handsontable-cell type

    在单元格中呈现自定义的元素:不能使用html元素 var data = [ { title: "<a href='http://www.amazon.com/Professional- ...

  9. redis修改端口号

    为redis分配一个8888端口,操作步骤如下: 1.$REDIS_HOME/redis.conf重新复制一份,重命名为redis8888.conf. 2.打开redis8888.conf配置文件,找 ...

  10. iOS设备抓包终极解决方案(支持https)

    http://bbs.chinapyg.com/forum.php?mod=viewthread&tid=74423&extra=page%3D1%26filter%3Dtypeid% ...