float：就是在于布局，首先要介绍的是文档流（标准流），之后是浮动布局。

文档流：元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

浮动布局：

1、float:  left   |   right

2、元素浮动之后不占据原来的位置（脱标）

3、浮动的盒子在一行上显示

4、行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block）

浮动作用：

1、文本饶图

2、导航制作

3、网页布局

文本饶图：这里有个十分特殊的知识点，就是当红色的div浮动以后，虽然p元素也是块状元素，但是p标签并没有往上顶到红色的div下。这是因为float当初被开发出来就是为了解决文字环绕的问题。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style>
  7.         .box1 {
  8.             width: 400px;
  9.             height: 500px;
  10.             background-color: yellow
  11.         }
  12.         .box2 {
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: red;
  16.             float: left
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="box1" style="">
  22.         <div class="box2"></div>
  23.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  24.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  25.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  26.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  27.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  28.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  29.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  30.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  31.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  32.         <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
  33.     </div>
  34. </body>
  35. </html>

效果：

导航制作：之前制作导航都是将文字放置于一个div中，然后设置它们的a标签为行内块。现在直接设置li为浮动就行了。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         body,ul,li{
  8.             margin:0;
  9.             padding: 0;
  10.         }
  11.         ul,li{
  12.             list-style: none;
  13.         }
  14.         .nav{
  15.             width: 800px;
  16.             height: 40px;
  17.             background: pink;
  18.             margin: 20px auto;
  19.         }
  20.         .nav ul li{
  21.             float: left;
  22.  
  23.         }
  24.         .nav ul li a{
  25.             display: inline-block;
  26.             height: 40px;
  27.             font: 14px/40px 微软雅黑;
  28.             padding:0 20px;
  29.             text-decoration: none;
  30.         }
  31.         .nav ul li a:hover{
  32.             background: #aaa;
  33.         }
  34.  
  35.     </style>
  36. </head>
  37. <body>
  38.     <div class="nav">
  39.         <ul>
  40.             <li><a href="#">百度</a></li>
  41.             <li><a href="#">百度一下</a></li>
  42.             <li><a href="#">14期威武</a></li>
  43.         </ul>
  44.     </div>
  45. </body>
  46. </html>

效果：

CSS——float的更多相关文章

  1. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  2. [CSS]float&clear浮动

    CSS float 属性 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.  可取的值 ...

  3. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  4. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  5. css float left right 中间空间城数据无法显示

    css float left right 中间空间城数据无法显示 是由于设定了width具体值太小造成,简单用%值或不设置.

  6. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  7. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  8. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  9. CSS Float（浮动）

    CSS Float(浮动) 一.CSS Float(浮动) CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常 ...

  10. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

随机推荐

  1. codevs2486 太鼓达人

    题目描述 Description 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员XLk.Poet_s ...

  2. Alcatel OmniSwitch 重置密码

    OmniSwitch 6250重置密码 Press s to STOP AT MINIBOOT... [Miniboot]->cd "network" value = 0 = ...

  3. Windows 注册表常用操作

    1 添加一个主键(比如在HKEY_LOCAL_MACHINE\SOFTWARE\中添加一个ABCEDFGHIJKLMN主键) Windows Registry Editor Version 5.00 ...

  4. Android---58---初学GPS定位

    GPS英文是Global Positioning System 全球定位系统的简称. Android为GPS功能支持专门提供了一个LocationManager,位置管理器.全部GPS定位相关的服务. ...

  5. 我所不知道的 javascript 函数

    对字符串进行 Base64 加密: window.btoa(str) ---转码 window.atob(str) ---解码 这种加密方法不能加密中文,可以先进行 encodeURIComponen ...

  6. ios 从rgb array生成UIImage并显示,oc版

    ; ; const size_t Area = Width * Height; ; // rgba std::vector<uint8_t> output(Area*channles); ...

  7. 20170620_javaweb_小结

    01.session失效的方式 02. session和cookie的区别 03.jsp九大内置对象,意义 以及对应的java类 04.转发和重定向 05.jsp的执行过程 和 生命周期 06.实现s ...

  8. 处理new分配内存失败情况

    转自:http://www.51testing.com/html/70/n-827070.html 在C++语言中,我们经常会使用new给一个对象分配内存空间,而当内存不够会出现内存不足的情况.C++ ...

  9. Script Library 配置 和 使用

    Script Library有两个级别,Workspace级别和Project级别 使用:这里的package指的是Script Library下的文件夹名,和引用代码里的package没有关系

  10. ios7--UIImageView

    // // ViewController.m // 03-UIImageView的使用 // #import "ViewController.h" @interface ViewC ...