CSS属性float的用法
本篇内容主要讲解“CSS属性float的用法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS属性float的用法”吧!
成都创新互联是专业的山东网站建设公司，山东接单;提供成都网站建设、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行山东网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
我们来看看CSS重要属性--float。
以下内容分为如下小节：
1：float属性
2：float属性的特性
2.1：float之文字环绕效果
2.2：float之父元素高度塌陷
3：清除浮动的方法
3.1：html法
3.2：css伪元素法
4：float去空格化
5：float元素块状化
6：float流体布局
6.1：单侧固定
6.2：DOM与显示位置不同的单侧固定
6.3：DOM与显示位置相同的单侧固定
6.4：智能布局
1：float属性
float，顾名思义是漂浮，浮动的意思。但是在css中，它被理解成浮动。float有四个属性，即
CSS Code复制内容到剪贴板
float:none;
float:left;
float:rightright;
float:inherit;
比较常用的两个属性值是左浮动和右浮动。在接下来的分享中，只会拿左浮动作为例子。其他浮动属性值与左浮动原理相同。
2：float属性的特性
2.1：float之文字环绕效果
浮动的初衷就是为了文字环绕效果。
看如下代码和demo。
XML/HTML Code复制内容到剪贴板
Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
CSS Code复制内容到剪贴板
.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
.container .content {
float: left;
width: 150px;
height: 150px;
background-color: lightpink;
margin: 5px;
}
content 元素设置了左浮动，使div元素脱离文档流，文字在其周围坏绕显示。
2.2：float之父元素高度塌陷
以div元素为例。div元素的高度会通过内容自动撑开。也就是说，内容有多少，高度就有多高。但是当内部元素设置了float属性之后，会是父元素高度塌陷。代码和实例如下。
XML/HTML Code复制内容到剪贴板
Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
如下，塌陷后css和demo。
CSS Code复制内容到剪贴板
.container {
width: 300px;
border: 1px solid black;
}
.container p {
float: left;
}
3：清除浮动的方法
那么问题来了，如果内部元素要设置浮动，那如何避免父元素高度塌陷的问题呢？
有同学肯定会想，直接在父元素设置高度不就可以了吗？这在实际中是不行的。因为如果固定了父元素的高度，那如果之后想在其添加内容，不是又要去修改css代码了，特麻烦。
那解决父元素高度塌陷有两种方法。
3.1：父元素底部添加空div，然后在添加属性clear : both。
代码如下。
XML/HTML Code复制内容到剪贴板
Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
