浮动概述：浮动，指的是元素标签使用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. Linux --centos7 开机启动设置

    以Linux下指定sun用户在linux开机时执行/home/sun/startrun.sh为例: 以root登录linux 执行vi /etc/rc.d/rc.local 在文档末尾添加一行语句:s ...

  2. curl传post数据流

  3. Homestead window10 storage:link 不能建立符号链接的处理办法

    重启电脑 1. 以管理员身份运行 cmd 2. vagrant up 3. vagrant ssh 4. php artisan storage:link

  4. [SoapUI] Mock Service

    https://www.soapui.org/getting-started/mock-services.html

  5. http://www.atool.org/keytype.php#0-tsina-1-53371-397232819ff9a47a7b7e80a40613cfe1

    http://www.atool.org/keytype.php#0-tsina-1-53371-397232819ff9a47a7b7e80a40613cfe1

  6. jquery怎么根据后台传过来的值动态设置下拉框、单选框选中

    $(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").v ...

  7. PHP中刷新输出缓冲详解[转载]

    PHP中刷新输出缓冲详解 分类: PHP Web开发2011-07-23 17:42 1795人阅读 评论(0) 收藏 举报 phpbuffer浏览器outputapache模块脚本 buffer是一 ...

  8. RSA加密解密总结

    简单的控制台程序 #include"stdafx.h" #include <math.h> #include<string.h> /*/求解密密钥d的函数( ...

  9. I-Keyboard

    SPOJ Problem Set (classical) 14. I-Keyboard Problem code: IKEYB Most of you have probably tried to t ...

  10. 企业搜索引擎开发之连接器connector（十八）

    创建并启动连接器实例之后,连接器就会基于Http协议向指定的数据接收服务器发送xmlfeed格式数据,我们可以通过配置http代理服务器抓取当前基于http协议格式的数据(或者也可以通过其他网络抓包工 ...