这个东西叫浮动。
顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。
正常情况下,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. springMVC (优秀篇)

    本文依然是复制的 Spring3 MVC结构简单,应了那句话简单就是美,而且他强大不失灵活,性能也很优秀. 官方的下载网址是:http://www.springsource.org/download  ...

  2. BZOJ2084[Poi2010]Antisymmetry——回文自动机

    题目描述 对于一个01字符串,如果将这个字符串0和1取反后,再将整个串反过来和原串一样,就称作“反对称”字符串.比如00001111和010101就是反对称的,1001就不是.现在给出一个长度为N的0 ...

  3. BZOJ2038[2009国家集训队]小Z的袜子(hose)——莫队

    题目描述 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命……具体来说,小Z把这N只袜子从1到N编号 ...

  4. Codeforces1073E Segment Sum 【数位DP】

    题目分析: 裸的数位DP,注意细节. #include<bits/stdc++.h> using namespace std; ; int k; ][],sz[][],cnt[][]; ] ...

  5. LOJ6433 [PKUSC2018] 最大前缀和 【状压DP】

    题目分析: 容易想到若集合$S$为前缀时,$S$外的所有元素的排列的前缀是小于$0$的,DP可以做到,令排列前缀个数小于0的是g[S]. 令f[S]表示$S$是前缀,转移可以通过在前面插入元素完成. ...

  6. 机器学习---朴素贝叶斯分类器(Machine Learning Naive Bayes Classifier)

    朴素贝叶斯分类器是一组简单快速的分类算法.网上已经有很多文章介绍,比如这篇写得比较好:https://blog.csdn.net/sinat_36246371/article/details/6014 ...

  7. Alice's Chance POJ - 1698(按时间点建边)

    Alice's Chance Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7791   Accepted: 3174 De ...

  8. Codeforces Round #530 (Div. 2) A,B,C,D

    A. Snowball 链接:http://codeforces.com/contest/1099/problem/A 思路:模拟 代码: #include<bits/stdc++.h> ...

  9. MT【308】投影的定义

    已知向量$\overrightarrow{a},\overrightarrow{b}$满足:$|\overrightarrow{a}|=2$,向量$\overrightarrow{b}$与$\over ...

  10. [UOJ317]【NOI2017】游戏 题解

    题意 ​ 小 L 计划进行 \(n\) 场游戏,每场游戏使用一张地图,小 L 会选择一辆车在该地图上完成游戏. ​ 小 L 的赛车有三辆,分别用大写字母 A.B.C 表示.地图一共有四种,分别用小写字 ...