CSS中float属性
这个东西叫浮动。
顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。
正常情况下,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属性的更多相关文章
- CSS中float属性和clear属性的一些笔记
在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS中 Zoom属性
CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...
- CSS中float和Clear的使用
CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...
- 深入理解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 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- CSS中浮动属性float及清除浮动
1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...
随机推荐
- Nginx 优先选择连接最少的上游服务器
详见陶辉87课 upstream test { server ; server ; least_conn ; zone backends 64k; }
- Tomcat启动特慢之SecureRandom问题解决
tomcat启动日志: 08-Jun-2018 09:23:00.445 WARNING [localhost-startStop-1] org.apache.catalina.util.Sessio ...
- BZOJ4712洪水——动态DP+树链剖分+线段树
题目描述 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开了创造模式,然后飞到 山顶放了格水.于是小A面前出现了一个瀑布.作为平民的小A只好老实巴交地爬山堵水.那么 ...
- Python小爬虫——抓取豆瓣电影Top250数据
python抓取豆瓣电影Top250数据 1.豆瓣地址:https://movie.douban.com/top250?start=25&filter= 2.主要流程是抓取该网址下的Top25 ...
- MT【243】球内接四面体体积
已知半径为2的球面上有$A,B,C,D$四点,若$AB=CD=2$,则四面体$ABCD$的体积最大为____ 解答:利用$V=\dfrac{1}{6}|AB||CD|d<AB,CD>sin ...
- Nifi InvokeHttp processor
Authorization: Bearer <access-token> Content_type: application/json NIFI 中国社区 QQ群:595034 ...
- Scout YYF I POJ - 3744(概率dp)
Description YYF is a couragous scout. Now he is on a dangerous mission which is to penetrate into th ...
- HDU46093-idiots
题目大意 给一堆边的长度,问从中随机选出三条边来能够组成三角形的概率. 题解 其实就是要求能够组成三角形的方案数.直接从三条边入手问题会很复杂,所以我们可以先求出f[x]表示随便选出两条边长度之和为x ...
- Mysql 从入门到遗忘
高级数据过滤: WHERE AND OR NOT 总是与其他操作符一起使用,用在要过滤的前面. 通配符过滤: LIKE: %相当于正则中的.*?,_相当于正则中的.. $ select id from ...
- A.01.01—模块的输入—低端输入
汽车电子模块的输入一般包含数字量低端输入.数字量高端输入.模拟量输入.脉宽调制输入.总线信号输入.脉冲信号输入,对于无线信号输入和视频信号音频信号我们不做讨论. 数字量低端输入是应用最为广泛的一种输入 ...