整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
素显示模式
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 :不允许有浮动对象
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
文档流
是浏览器解析网页的一个重要概念。对于一个XHTML网页，body元素下的任意元素，根据其先后顺序，组成了一个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它们在网页中的位置。文档流是浏览器的默认显示规则。
Float
1）浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2）由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
例1：
例2：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
例3：
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
例4：
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
例5：
浮动元素会生成一个块级元素，而不论它本身是何种元素。
代码：
<head>
<style type="text/css">
span{ float:left; width:100px; height:100px; background-color: #FFCCCC}
</style>
</head>
<body>
<span>内联元素浮动会变成块</span>
</body>
效果：
解释：内联元素无法设置宽高，但是加了float后便可以，说明浮动的元素都是块。
· 如果未给浮动元素设置宽度，那么其宽度为内容宽度。
代码：
<head>
<style type="text/css">
div{ float:left;background-color: #FFCCCC}
</style>
</head>
<body>
<div>浮动元素的默认宽度看内容</div>
</body>
效果：
解释：div是个块级元素，默认宽度为父级容器的100%，但是加上浮动后，宽度变的符合内容，可见，浮动的元素，如果不设置宽度，那么它会根据内容自适应宽度。
开发程序时，会经常用到框架，比如说常见的考试管理系统就涉及了浮动框架。今天给大家展示一个简单的例子如何运用浮动框架（独立功能的页面）重新组成一个完整的页面（A页面），在浏览器显示。要实现如下的效果：
把要实现的页面分为两大部分，一部分是左侧主要是系统管理选项（B页面），另一部分是右侧的查询结果显示（C页面），最后再用用浮动框架把他们嵌入到最后显示页面，便于表达我们就叫它A页面。A页面代码如下：
上图标红框的位置是框架嵌入的页面，它们分别是A页面左侧（B页面）和A页面的右侧（C页面）。B页面和C页面代码如下：
B页面代码
C页面部分代码
技术要点
浮动框架常见属性
浮动框架iframe是一种特殊的框架页面，可以在浏览器窗口嵌套子窗口，在其中显示子页面的内容。语法格式是：
文件时其他框架文件的文件名或者链接，name是框架的名字，align是指对齐方式（left、right、center、justify），scrolling是框架的滚动条显示有三个值（yes、no、auto），frameborder是浮动框架的边框属性。
静态网站使用框架注意事项
1、在seo中应用了大量的框架结构，会导致搜索引擎的“蜘蛛”程序无法抓取页面，不利于网站seo，所以不建议大规模在静态网页上应用框架结构。
2、要处理好框架页面出现的滚动条，滚动条太多会影响用户体验，最后得不偿失。
3、框架不适合复杂效果页面布局（比如说专题页），静态网站还是建议使用div+css布局页面。
关于“关于HTML中浮动框架的应用”先聊到这。图中是源码一部分，源码私信。每天学习一个知识点，每日寄语”你所有的努力，都有迹可循。”如转载清标明出处，
*请认真填写需求信息，我们会在24小时内与您取得联系。
