float
　　none 正常显示
　　left 左浮动
　　right 右浮动
clear
　　none 允许两边浮动
　　left 不允许左边浮动
　　right 不允许右边浮动
　　both 不允许两边浮动

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>CSS 中浮动的使用</title>

 <style type="text/css">

 .div1{

     background-color:#0F0;

     width:200px;

     height:200px;

     float:left;

 }

 .div2{

     background-color:#0FF;

     width:200px;

     height:200px;

     float:left;

 }

 .div3{

     background-color:#000;

     width:200px;

     height:200px;

     float:left;

 }

 .div4{

     background-color:#FF0;

     width:200px;

     height:200px;

     float:left;

 }

 </style>

 </head>

 <body>

 <div class="div1"></div>

 <div class="div2"></div>

 <div class="div3"></div>

 <div class="div4"></div>

 </body>

 </html>

浮动的特点：

　　1.使块元素在一行显示

　　2.使内嵌支持宽高

　　3.不设置宽度的时候宽度由内容撑开

内联元素加了浮动之后，变得可以设置宽高

<style>

    span{ width:100px; height:100px; background:red; float:left;}

</style>

<body>

    <span>asf</span>

    <span>fdsaf</span>

</body>

元素加了浮动之后，就相当于漂浮到了上层，下面的元素就会在下层，当时下层元素里面的内容还是会被上层挤出来  如：

<style>

body{ font-size:20px;}

.box1{ width:100px;height:100px;background:red; float:left;}

.box2{ width:200px;height:200px;background:blue;}

</style>

</head>

<body>

<div class="box1">box1</div>

<div class="box2">box2</div>

</body>

第一个div浮动了浮到上层，第二个div被第一个盖住，但是第二个div中的内容会被挤出来

<style>

body{ font-size:20px;}

.box1{ width:200px;height:200px;background:red; float:left;}

.box2{ width:200px;height:200px;background:blue;}

</style>

</head>

<body>

<div class="box1">box1</div>

<div class="box2">box2</div>

</body>

浮动产生的问题和清除浮动的方法

<style>

body{margin:0;}

.box{width:400px; margin:0 auto; border:1px solid red; height:100px;}

.left{width:300px; height:300px; border:1px solid green;}

/*当父元素没设定高度的时候，子元素设定了高度是可以撑开父元素的，但是当父元素设定了高度或者子元素设定浮动后脱离文档流后就不能了*/

</style>

</head>

<body>

<div class="box">

    <div class="left"></div>

</div>

</body>
<style>

body{margin:0;}

.box{width:400px; margin:0 auto; border:1px solid red;  float:left;}

.left{width:300px; height:300px; border:1px solid green;}

/*当父元素没设定高度的时候，子元素设定了高度是可以撑开父元素的，但是当父元素设定了高度或者子元素设定浮动后脱离文档流后就不能了*/

/*当父元素也浮动的时候又能包住子元素了，前提是父元素不设置小于子元素的高度和宽度，但这种方法不实用，导致margin：0 auto的居中无效了，而且当父元素还用父元素的时候，就要再一层层往上加浮动这样很麻烦*/

</style>

</head>

<body>

<div class="box">

    <div class="left"></div>

</div>

</body>
父级浮动                            问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）
 
 
 
 
inline-block 清浮动方法： 问题：margin左右自动失效；

定位来清楚浮动

<style>

#box1{border:30px solid red; position:fixed;}

#box2{ width:300px; height:300px; background:blue; float:left;}/*子元素加了浮动之后，脱离了文档流，包不住子元素，父元素就可以加上绝对定位或者浮动点位*/

</style>

</head>

<body>

<div id="box1">

    <div id="box2"></div>

</div>

</body>

CSS 中浮动的使用的更多相关文章

  1. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  2. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  3. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

  4. CSS中浮动的使用

    CSS有两个性质 第一个是 :继承性 第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁 { 里面分两种情况: 分别是 选中和没选中. 1.选不中的情况下,走继承性,(font,color,t ...

  5. CSS中浮动属性float及清除浮动

    1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...

  6. 关于css中浮动的理解及实际应用

    一.元素浮动的意义及使用:1. 浮动的意义:设置了浮动属性的元素会脱离普通标准流的控制,移动到其父元素中指定的位置的过程,将块级元素放在一行,浮动会脱离标准流,不占位置,会影响标准流,浮动只有左右浮动 ...

  7. css 中的浮动

    css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...

  8. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

  9. css中的float属性以及清除方法 (2011-09-03 17:36:26)

    CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div ...

随机推荐

  1. JavaScript之数据类型讲解

    JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String.还有1种复杂数据类型——Object,Object本质上是由一 ...

  2. C:\Windows\system32\config\systemprofile\AppData\Local\Microsoft\Team Foundation\4.0\Cache\VersionControl.config is not valid and cannot be loaded.

    Recently, we experienced a strange problem with TFS 2010. We spent a few days before we figured it o ...

  3. asp.net网站中添加百度地图功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  4. ***PHP preg_match正则表达式的使用

    第一,让我们看看两个特别的字符:‘^’和‘$’他们是分别用来匹配字符串的开始和结束,以下分别举例说明 : "^The": 匹配以 "The"开头的字符串; &q ...

  5. 2014多校第五场1001 || HDU 4911 Inversion （归并求逆序数）

    题目链接 题意 : 给你一个数列,可以随意交换两相邻元素,交换次数不超过k次,让你找出i < j 且ai > aj的(i,j)的对数最小是多少对. 思路 : 一开始想的很多,各种都想了,后 ...

  6. Linux网络编程5——使用UDP协议实现群聊

    引言 本文实现的功能类似于我之前所写的一篇博文(Linux之select系统调用_2),区别在于进程之间的通信方式有所不同.之前的文章中,我所使用的是管道,而本文我将会使用socket接口. 需求 客 ...

  7. poj 3615(floyd变形)

    题目链接:http://poj.org/problem?id=3615 思路:map[i][j]表示顶点i,j之间的最高的障碍物,于是题目要求的是最高障碍物的最小值,不就是min(map[i][j], ...

  8. Struts2 直接返回字符串（可用于json）

    struts2可以在method中直接返回一个字符串而不是视图.让Action中的返回字符串的方法,直接return null;并在return之前用输出流输出字符串就可以了,跟servlet输出HT ...

  9. excel设置下拉菜单，并且不同值会显示不同颜色

    工作中常常要用的excel,每次都会有新的需求,然后不会,然后百度,然后过段时间可能就又忘了,于是就想说,自己记录下来~~~因为自己用的都是2010,其实哪个版本都差不多,都是应该可以找到相应的按钮滴 ...

  10. TCP与UDP的不同接包处理方式

    TCP与UDP的不同接包处理方式 1.UDP发包的问题问:udp 发送两次数据,第一次 100字节 ,第二次200字节, 接包方一次recvfrom( 1000 ), 收到是 100,还是200,还是 ...