整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
素显示模式
display : block | none | inline | inline-block
display 属性用来设置元素的显示方式。
block块对象指的是元素显示为一个方块，默认显示状态下，它将占
据整行，其它的元素只能在下一行显示。
inline行间对象与block刚好相反，它允许其它元素在同一行显示。
none隐藏对象
元素的浮动
float : none | left | right
float 属性用来控制元素是否浮动显示。
left向左浮动
right向右浮动
none不浮动
浮动的时候元素的显示属性也变化了 变为 "行内元素"
Css 布局
div 标签：
<div> </div>
div 与其它标签一样，也是一个XHTML所支持的标签。
div 是XHTML中指定的，专门用于布局设计的容器标签。
在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css.因此我们称这种布局方式为 div + css 布局。
<div id="header">页面头部</div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer">页脚</div>
盒模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。
对我们来说，只需要理解元素在页面中所占据的位置。
ie6 / ie7 / firefox 的最终宽度 =左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽
文档流
文档流是浏览器解析网页的一个重要概念，对于一个XHTML网页，body 元素下的任意元素，根
据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它
们在网页中的位置。
文档流是浏览器的默认显示规则。
深入浮动
浮动的目的
就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利
用float属性。
1.任何申明为 float 的元素自动被设置为一个"块级元素"。
2.在标准浏览器中 浮动元素脱离了文档流 ，所以浮动元素后的元素会占据浮动元素本来应该
所处的位置。
3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行 。
4.文字内容会围绕在浮动元素周围 。
5.浮动元素只能浮动至左侧或者右侧 。
清除浮动
clear : none | left | right | both
none :默认值。允许两边都可以有浮动对象
left :不允许左边有浮动对象
right: 不允许右边有浮动对象
both :不允许有浮动对象
CSS世界中的float属性是一个年代非常久远的属性。虽然最初创造浮动并不是为了用于页面布局，但它在布局方面表现得很出色。然而为了理解浮动，我们首先必须牢记它的设计初衷。Web诞生之初，带宽就那么一点点，我们能够做到的也只是展示文字以及零星图片而已，怎么可能浮动设计的目的就是为了实现各种砖头式的复杂布局呢？那个年代复杂布局都是用<table>实现的。既然这样，那float属性设计的目的究竟是什么呢？
很简单，一句话：浮动的本质就是为了实现文字环绕效果。而这种文字环绕，主要指的就是文字环绕图片显示的效果。所以，大家应该也多少对为什么老IE浏览器与浮动相关的bug一火车都装不下有些了解了吧！人家的功能本来就很单纯，只是让文字可以绕着图片跑，你偏要各种布局，结果撑不住了吧！
所以说：浮动是魔鬼，少砌砖头、少浮动，要更多地去挖掘CSS世界本身的“流动性”和“自适应性”，以构建能够适用于各种环境的高质量的网页布局。好的网页应该如同好的建筑。传统的楼房是典型的“刚”式结构，砖头加楼板，问题不言而喻，一个小小的地震可能就被夷为平地；而好的楼房应该是有“柔”在其中，也就是高质量的钢筋结构，当地震导致房屋摇晃的时候，可以通过钢筋的“柔性”卸力而保障整体结构的稳固。台风袭来，很少见到说柔弱的柳树被吹倒，反而会经常看到坚固的电线杆被风吹倒的消息，道理其实也类似。
浮动有三个关键字可以选择，left为向左浮动，right为向右浮动，none为不浮动。无论是行内元素（inline）还是块级元素（block），设置浮动后都会变成块级元素。但表现得却更像行内块元素（inline-block），因为在没有明确宽度的时候，宽度会随着内容自适应，而不是占据一行。
过去，浮动的行为经常受到浏览器bug的干扰，特别是在IE6和IE7中。幸亏这些浏览器几乎已经淡出市场了，我们不必再担心那些bug了。现在我们可以保证各种浏览器对浮动的处理是一致的。但是浮动仍有一些行为会让你措手不及。这些并不是bug，而是因为浮动严格遵循了标准。让我们来看看浮动如何工作，以及怎样调整浮动的行为来实现理想的布局。
float都有哪些有意思的特性呢？具体如下：
所谓“包裹性”，由“包裹”和“自适应性”两部分组成。包裹假设浮动元素父元素宽度180px，浮动元素子元素是一个120px宽度的图片，则此时浮动元素宽度表现为“包裹”，就是里面图片的宽度120px，代码如下：
.div { width: 180px; }
.float { float: left; }
.float img { width: 120px; }
<div class="div">
<div class="float">
<img src="float.jpg">
</div>
</div>自适应性，如果浮动元素的子元素不只是一张120px宽度的图片，还有一大波普通的文字，例如：
<div class="father">
<div class="float">
<img src="float.jpg">大家好，我是码农洞见。
</div>
</div>则此时浮动元素宽度就自适应父元素的180px宽度，最终的宽度表现也是180px。
块状化的意思是，元素一旦float的属性值不为none，则其display计算值就是block或者table。
float通过破坏正常CSS流实现CSS环绕，带来了烦人的“高度塌陷”的问题，然而，凡事都具有两面性，只要了解透彻，说不定就可以变废为宝、化腐朽为神奇。例如。我们可以利用float破坏CSS正常流的特性，实现两栏或多栏的自适应布局。
浮动会影响周围元素，并且还会引发很多意想不到的问题。在CSS中，我们可以使用clear属性来清除浮动带来的影响。clear属性语法如下：
clear: none | left | right | both在实际开发中，我们几乎不会使用“clear:left”或“clear:right”来单独清除左浮动或右浮动，往往都是直截了当地使用“clear:both”来把所有浮动清除，既简单又省事。也就是说，我们只需要记住“clear:both”就可以了。
通过阅读本文我们了解到浮动的设计初衷是让文字围绕一个元素排列，但有时这种效果并不是我们想要的。使用清除浮动来包含浮动元素。所谓生生相克，既然有破坏，就有保护其他元素不被破坏的属性。总之，只有深入理解浮动的工作原理，勤加练习才有可能避开常见的陷阱。达到选择合适的工具来实现想要的效果。
为初学者提供学习指南，为从业者提供参考价值。我坚信码农也具有产生洞见的能力。关注【码农洞见】，一起学习和交流吧！
东IT优就业
广州IT培训老师给大家讲讲，清除浮动的几种常用方法。
首先，浮动这个样式的出现，仅仅只是为了实现图文环绕的效果，现在大多时利用浮动来布局;
浮动：
使元素推理文档流，按照指定方向发生移动;
遇到父级边界或者相邻的浮动元素会停下来;
浮动的特性：
1）块元素一行显示多个;
2）内联元素支持宽高;
3）没有设置宽度时由内容撑开宽度;
4）脱离文档流。
浮动的破坏性：
浮动元素脱离文档流后，导致父级元素高度塌陷。父级元素无法包裹住子级浮动元素。
为什么要清除浮动？主要是解决父级高度塌陷。
清除浮动的方法：
1）clear清除浮动
clear:left || right || both || none
clear:left 清除左侧浮动元素;
clear:right 清除右侧浮动元素
clear:both 清除左右两边
clear:none 不清除
代码：
效果图：
缺点：如果浮动元素过多浪费标签，不优雅。
2）inline-block请浮动
效果图：
缺点：margin：auto;失效。
3）<br/>的clear属性请浮动
代码：
效果图：
缺点： 当前页面有很多模块用到浮动时，每个用到的模块都要加
不符合w3c标准。
4.以浮制浮
给父级添加浮动
代码：
效果图：
缺点：不理智的行为，总会有个父级节点会塌陷;
5.：afte伪类请浮动
代码：
效果图：
缺点：无，目前最优雅的清除浮动的方式。
希望广州IT培训老师上述分享的内容对大家有所帮助，有其他IT常见问题欢迎提出交流。
广东IT优就业
出处：www.cnblogs.com/LNning/p/7897331.html
更多IT精彩推荐：
月入过万的WEB工程师是如何炼成的?http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009338
*请认真填写需求信息，我们会在24小时内与您取得联系。
