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. SCAN----Redis检索键值对

    转载地址:http://redis.readthedocs.org/en/latest/key/scan.html SCAN SCAN cursor [MATCH pattern] [COUNT co ...

  2. 经典算法（六） simhash

    参考文档: simhash算法原理及实现:https://blog.csdn.net/chenguolinblog/article/details/50830948

  3. Notepad++ 【自动完成】与【输入时提示函数参数】互相冲突，无奈

    Notepad++ 既然可以在输入时提示函数参数,可是当提示函数参数的时候,输入具体参数时[自动完成]失效了. 一位用户遇到和我一样的问题:https://community.notepad-plus ...

  4. [ARM-Linux]Linux-MATLAB安装

    说明 网上关于caffe的安装教程非常多,但是关于每一步是否操作成功,出现了什么样的错误又该如何处理没有给出说明.因为大家的操作系统的环境千差万别,按照博客中的教程一步步的安装,最后可能失败--这是很 ...

  5. 【数据结构】【计算机视觉】并查集(disjoint set)结构介绍

    1.简述 在实现多图像无序输入的拼接中,我们先使用surf算法对任意两幅图像进行特征点匹配,每对图像的匹配都有一个置信度confidence参数,来衡量两幅图匹配的可信度,当confidence> ...

  6. .net core使用AutoMapper

    AutoMapper文档:http://docs.automapper.org/en/stable/The-MyGet-build.html 新的版本抛弃了静态API方法,我们将使用依赖注入来完成. ...

  7. 【转】android实时视频网络传输方案总结（一共有五套）

    最近研究了Android的实时视频网络传输问题,在视频处理方面花费了大量精力进行研究,总结出以下五套方案,并加以比较 以320×240大小的视频传输为例 方案 压缩率 压缩/传输方式 实时性 平均流量 ...

  8. linux shell提示输入 输错字符解决方法

    linux shell提示输入 输错字符解决方法ctrl+回车 删除单个字符ctrl+u删除光标前全部字符ctrl+k删除光标后全部字符

  9. Python3注解+可变参数实现

    一.说明 1.1 关于注解 关于注解这个东西,最早是在大学学java的时候经常会看到某些方法上边@override之类的东西,一方面不知道其作用但另一方面似乎去掉也没什么影响,所以一直都不怎么在意. ...

  10. [转帖]【Ubuntu】Ubuntu 各版本代号简介

    [Ubuntu]Ubuntu 各版本代号简介 https://www.jianshu.com/p/7b351fde8799 一.版本及代号说明 Ubuntu中,每个版本都有一个更为特色的名字,这个名字 ...