这个东西叫浮动。
顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。
正常情况下,HTML页面中块元素都是从上倒下排列的。如果想实现左右结构。
float的一种选择(当然还有其他方法)。
比如

 <div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:left;width:200px">右</div>
</div>

 这样,这个两个DIV标签就在同一行上了(同时靠左),当然有个前提,就是他们俩的父元素的宽度要至少大于400px,这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白

 <div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:right;width:200px">右</div>
</div>

 以上写法,也是在同一行。不同的是,一个靠左,一个靠右。

 这里边的两个DIV的中间有100PX的空白。

 需要注意的是,当标签使用了float属性后,就脱离了标准输出流,就不受页面约束了。这样不方便,也不利于页面布局。
 所以,一般浮动之后要清除浮动。

 <div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:right;width:200px">右</div>
<span style="clear:both"></span>
</div>

 这样,页面整体的布局结构就基本上没有被破坏了。

CSS中float属性的更多相关文章

  1. CSS中float属性和clear属性的一些笔记

    在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...

  2. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  3. CSS中 Zoom属性

    CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...

  4. CSS中float和Clear的使用

    CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...

  5. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  6. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  7. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  8. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  9. CSS中浮动属性float及清除浮动

    1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...

随机推荐

  1. 了解AutoCAD对象层次结构 —— 4 —— 符号表

    上一小节我们看到了符号表包含了一系列的表(共9个),这些表数量是固定的,用户不能增加新的表,也不能删除现有的表. 符号表名称 符号表功能 Block Table 块表 存储图形数据库中定义的块.此表中 ...

  2. CodeForces512C-Pluses everywhere-模拟/数学/排列组合模板

    经过研究可以发现,每一位的贡献是C(n-2,k-1)+C(n-3,k-1)...C(k-1,k-1) 同时还要注意加号全部在左边的情况. 这里还用了O(n)预处理O(1)组合数的模板.//妙啊..妙. ...

  3. linux下后台启动springboot项目

    linux下后台启动springboot项目 我们知道启动springboot的项目有三种方式: 运行主方法启动 使用命令 mvn spring-boot:run”在命令行启动该应用 运行“mvn p ...

  4. 洛谷P1501 Tree II

    LCT 还是LCT的板子,下放标记和那道线段树2一样,先放乘..之前用char忘记getchar,调了好久... 注意开long long!! #include <bits/stdc++.h&g ...

  5. Hyper-V 配置虚拟网络

    Hyper-V功能异常强大,不了解的自行GG 本文介绍如何使用Hyper-V在本机建立虚拟网络,创建虚拟交换机 打开Hyper-V Manager,选择右边侧边栏的Virtual Switch Man ...

  6. 最小表示法模板(洛谷P1368 工艺)(最小表示法)

    洛谷题目传送门 最小表示是指一个字符串通过循环位移变换(第一个移到最后一个)所能得到的字典序最小的字符串. 因为是环状的,所以肯定要先转化为序列,把原串倍长. 设决策点为一个表示法的开头.比较两个决策 ...

  7. luogu5019 [NOIp2018]铺设道路 (贪心)

    和NOIp2013 积木大赛一模一样 我在堆一格的时候,我把它尽量地往右去延伸 于是如果对于一个i,a[i-1]<a[i],那i在之前一定只堆过a[i-1]那么多,所以要再堆a[i]-a[i-1 ...

  8. bzoj4383(拓扑排序)

    给定一个长度为n的正整数序列a,每个数都在1到10^9范围内,告诉你其中s个数,并给出m条信息,每条信息包含三个数l,r,k以及接下来k个正整数,表示a[l],a[l+1],...,a[r-1],a[ ...

  9. Docker部署Jenkins测试环境

    安装docker环境 yum install epel-release -y && yum install docker -y 如果是高手需要docker-compose的话就再装个d ...

  10. CodeForces - 589A(二分+贪心)

    题目链接:http://codeforces.com/problemset/problem/589/F 题目大意:一位美食家进入宴会厅,厨师为客人提供了n道菜.美食家知道时间表:每个菜肴都将供应. 对 ...