css 中 float 和 clear 的作用

相当于原来的 align 的作用，但能力要比 align 强的多。一旦发出float:left或float:right命令，被我浮动的对像就会向左或向右移动直到遇到边框( border) 、填充( padding）、边界( margin ）或者另一个块对象的边缘为止。

经典样式：
1、图文环绕：
<div style="width:400px;height:10px;background-color: #66CCFF; border: 1px solid #66CCCC;
float:left;">
</div>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>

2、浮动对象有负边界的情况：

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

<head>

<title>浮动对象有负边界的情况[请用标准浏览器查看]</title>

<!--

* {

}{margin:0px; padding:0px;}

body {

}{margin:50px; font-size:12px;}

#box {

}{background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; }

#box2 {

}{background-color: #33CC99;margin:-10px 10px 0px 0px; height:20px; width: 100px; border: 1px solid #336666;float:right;}

-->

</style>

</head>

<body>

<div id="box2">margin-top:-15px</div>

右上方小盒子边界是margin:-10px 10px 0px 0px;，folat:right，这个效果还可以吧，这可不是用相对、或者绝对定位做出来的哦，部分文字还是有环绕效果。如果在上面小盒子输标题，在这大盒子内部输内容，这种类型的网页版面效果还可以的，大家可以举一反三，多做出另外类似的效果来。</div>

</body>

</html>

3.如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性，子盒子漂浮后不会影响到父盒子的宽度，子盒子超出父盒子的部分会越到父盒子外面，但越出父盒子外的部分不会引起外边文本流的移动，而会直接覆盖在外边文字上面的.

4.如果父盒子不设定高度或者高度为自动，而其子盒子设定了浮动，并且高度超过了父盒子，在标准浏览器中，父盒子高度是不能自适高度，但是这种高度自适应常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内，浮动子盒子后边加入以下代码：<div style="clear:both"></div>清除掉那个小盒子的浮动。
<div id="box">
<div id="subBox">高度随着内容变大</div>
<div id = "removefloat" style="clear:both"></div>
</div>

5.没有设定宽度而又没有内容的对象浮动后宽度会趋近于0。

6.
并排的同一浮动方向的对像在一行中放不下时，可以自动换行;
浮动盒子在本文流中出现的位置会影响它的水平浮动位置，就像下面运行框效果，那些盒子并不是紧跟着一起出现的，之间有文本存在，所以结果造成所有等高的盒子并不是同一直线排列出现，而变成有一定的梯度。如果两个盒子之间文本流区块高度大于前边浮动元素高度时，紧接着的同一浮动方向的对象将会被自动换行显示;

------------------ clear ------------------------------------
1.如果你想一段文本流两边可以出现浮动对像的话，你可以用clear:none，看下面效果，蓝色背景段落两边的盒子是浮动的哦。
2．如果你要为一个网页准备一个页脚区块，比如<div id=”footer”></div>，你在设计网页的时候，你想不管你前边怎么浮动排版而又不想这个页脚跟上去，让它一直保持在前边内容后边，而且还是换行独立显示的，那么给这个页脚区块样式加个clear:both吧。

转载于:https://www.cnblogs.com/davyjiang/articles/1039317.html

css 中 float 和 clear 的作用相关推荐

css中float left与float right的使用说明
css中float left与float right的使用说明转自:http://www.jb51.net/css/33740.html 脚本之家 No! 要注意以下几点: 1. 浮动元素会被自 ...
用CSS的float和clear创建三栏液态布局的方法(转载）
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. ...
CSS之float和clear
文章目录 CSS之float和clear 一.Float属性高度坍塌解决办法方法一: 方法二: 方法三: 字围现象二.Clear属性 CSS之float和clear 盒子布局是现在较为流行的网 ...
[css] CSS中的calc()有什么作用？
[css] CSS中的calc()有什么作用? 用来计算长宽的属性,非常好用,百分比,px,vh/vm都可参与计算, 不过正如上面的大兄弟说的,运算符的左右要有空格,要不然不生效个人简介我是歌谣, ...
CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
关于css中float的一切
原文:http://css-tricks.com/all-about-floats/ 这篇文章说的简单易懂 float是CSS中关于定位的属性. float有4个值:none, left, righ ...
CSS中Float概念相关文章
float 是 css 的定位属性. 在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的float属性的页面元素就像在印刷布 ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
CSS中Float概念相关文章采撷
Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧.Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性.可用性问题备受责难.然而,这些问题的根源并不在于理论本身,而是开发人员以 ...

css 中 float 和 clear 的作用

css 中 float 和 clear 的作用相关推荐

最新文章

热门文章