float怎么用？css：float浮动使用总结

对于开发人员来说，float浮动是需要经常使用的，基本离不开它，却常常忍受着它给你带来的种种痛苦，也许你觉得它就那么一点儿知识，但是你真的能驾驭它么？css float浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。浮动可以理解为让某个DIV元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。本章节就来聊聊 float浮动的使用方法。

可以先学习php中文网相关的免费课程

1. 学习《CSS 在线手册》中的 CSS Float(浮动) 课程

2. 观看 《黑马程序员css视频教程》中的 浮动 章节

float浮动相关内容

1. float浮动你所不知道的用法详解

float最初的设计初衷，是为了实现图文混排效果，让文字环绕图片。如今的用法基本上都是为了实现横向排版，虽然是一种“误用”，却往往能达到我们想要的效果。大部分人知道用float，但却不是所有人都知道float的原理和设计初衷。

2. css浮动-float/clear的图文详解

假如某个p元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

3. float的正确用法，90%的人都用错了

float还有一个很有用的特性，就是清除空格。这个我不贴图片了，描述一下就好了。比如在一个p里面放我张图片，图片与图片之间默认会有几像素的空格，也可以称之为缝隙。但是往往这个缝隙或者空格并不是我们需要的，这时候只要给图片一个float，让其脱离文档流，图片与图片之间将会严丝合缝的在一起。

4. css多个div浮动float高度自适应的两种方法

采用 Div + CSS 进行三列或二列布局时，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同。

5. 详解CSS中float浮动

a.float的起源       浮动最初的设计是用来做文字的环绕效果的，这也是设计者想让我们做的东西。

b.float的参数

　　float属性的参数取值有三个：

　　left：表示元素浮动在左边。

　　right：表示元素浮动在右边。

　　none：对象不浮动，遵循标准文档流。

c.效果展示（以float：left为例，float：right的情况只是位置的不同）

6. CSS基础知识之float详细介绍

浮动有4个属性：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承）。浮动元素的包含块是其最近的块级祖先元素。

浮动元素会左偏移（或右偏移），直到它的外边界接触到『包含块的内边界』或『另一个浮动元素的外边界』。

相关问答

1. 如何解决float元素掉落的问题

2. html中使用float属性,父元素高度会变为0,怎么解决?

3. 哪些情况下float会失效？

【相关推荐】

 1. php中文网免费教程：《CSS 0基础入门教程》

 2. php中文网免费视频教程：《php.cn独孤九贱（2）－css视频教程》

Atas ialah kandungan terperinci float怎么用？css：float浮动使用总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!