CSS浮动:

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止

由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

选择器之 float属性:

left:向左移动

right:向右移动

选择器之clear属性:用于清除浮动

left:在左侧不允许浮动元素

right:在右侧不允许浮动元素

both:在左右侧均不允许浮动元素

情况演示1:(无浮动)

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#one{
border:1px solid red;
width:300px;
height:150px;
}#two{
border:1px solid black;
width:300px;
height:150px;
}
#three{
border:1px solid blue;
width:300px;
height:150px
}
</style>
</head>
<body>
<div id="one"> </div>
<div id="two"> </div>
<div id="three"> </div>
</body>
</html>

情况演示2:(红框向右浮动,直到碰到边缘,黑框向上顶)

情况演示3:(红框向左浮动,覆盖黑框)

情况演示4:(消除演示1的浮动,黑框不往上顶)

*一定注意!放的位置。此处为了使黑框不浮动,clear放在one后面、two前面

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
#one {
border: 1px solid red;
width: 300px;
height: 150px;
/*(红框向右浮动,直到碰到边缘,黑框向上顶)*/
float: right;
} #two {
border: 1px solid black;
width: 300px;
height: 150px;
} #three {
border: 1px solid blue;
width: 300px;
height: 150px;
}
/*(消除演示1的浮动,黑框不往上顶)*/
#clear {
clear: both;
}
</style>
</head> <body>
<div id="one"> </div>
<div id="clear"> </div>
<div id="two"> </div>
<div id="three"> </div>
</body> </html>

情况演示5:(三个框并列)

情况演示6:(放不下第三个框,蓝框挤到下一行)

情况演示7:(红框高度比黑框高,蓝框被卡住:float是left,挤下来是从右向左浮动的)

【使用DIV+CSS重写网站首页案例】CSS浮动的更多相关文章

  1. 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

    使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...

  2. 【使用DIV+CSS重写网站首页案例】CSS选择器

    使用表格<table></table>对网站首页进行布局有缺陷,不能拖动版块,不灵活. DIV Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个块级元 ...

  3. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  4. 【使用DIV+CSS重写网站首页案例】CSS盒子模型

    CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...

  5. PHP.5-DIV+CSS布局网站首页实例

    DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...

  6. HTML&CSS——使用DIV和CSS完成网站首页重构

    1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内 ...

  7. 原生CSS设置网站主题色—CSS变量赋值

    定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9 ...

  8. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

随机推荐

  1. JAVA JDK安装及path环境变量配置

    JDK安装 JVM  :JAVA虚拟机 JRE :java运行环境=JVM+核心类库 JDK :JAVA开发工具包=JRE+java开发工具 java开发工具:编译工具(javac.exe) . 运行 ...

  2. ElasticSearch 线程池类型分析之 ExecutorScalingQueue

    ElasticSearch 线程池类型分析之 ExecutorScalingQueue 在ElasticSearch 线程池类型分析之SizeBlockingQueue这篇文章中分析了ES的fixed ...

  3. Element 表单验证,不清空数据,仅仅取消表单字段校验

    重置表单 this.$refs['ageForm'].resetFields() // 表单重置 仅清空校验 this.$refs['ageForm'].clearValidate() // 清除验证

  4. 【C语言】获得数组长度

    c语言中,定义数组后可以用sizeof命令获取数组的长度(可容纳元素个数): 如: { int data[5]; int length; length=sizeof(data)/sizeof(data ...

  5. 数据结构部分总结(c语言版)

    这是一个 /*此头文件适用于串其中包括最基本的函数操作 OK代表成功NO代表失败FS为特殊失败的标志 注:此头文件中的初始化使用'0'代表结束的 使用者可以根据需要自行改变,最后一 个函数为KMP算法 ...

  6. python实现Huffman编码

    一.问题 利用二叉树的结构对Huffman树进行编码,实现最短编码 二.解决 # 构建节点类 class TreeNode: def __init__(self, data): "" ...

  7. PHP7.3.0+弃用FILTER_FLAG_SCHEME_REQUIRED的解决办法

    今天本地调用一个接口报错了: filter_var(): explicit use of FILTER_FLAG_SCHEME_REQUIRED and FILTER_FLAG_HOST_REQUIR ...

  8. 总结:WPF中模板需要绑定父级别的ViewModel该如何处理

    原文:总结:WPF中模板需要绑定父级别的ViewModel该如何处理 <ListBox ItemsSource="{Binding ClassCollection}"> ...

  9. 踏入OpenGL大门 —— VS2015开发环境配置 (详细图文)

    转自: https://www.jianshu.com/p/68c314fa9fea?from=groupmessage   眼睛熊 ---------------- 本文 ------------- ...

  10. 使用Supervisord软件管理go服务进程

    一.介绍Supervisord软件1.什么是Supervisord?Supervisord是一个非常优秀的进程管理工具,使用Python开发.它可以在类UNIX系统的方式让用户来准确地监视和控制后台一 ...