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(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...
随机推荐
- PHP——base64的图片的另类上传方法
前言 这只是个暂行的办法,回头研究好七牛云的base64上传或者vue的文件上传后还是要进行更改的 想法是这样的,既然前端只能穿base64的那就传base64的然后转为文件上传到七牛云后再删除 本地 ...
- Android app下载并安装
1 下载功能 //下载apk private void downloadApk(String apkUrl) throws PackageManager.NameNotFoundException ...
- Python中的numpy模块解析
numpy 1. 创建对象 维度(dimensions):轴 轴的个数:秩(rank) Numpy最重要的一个特点就是其N维数组对象(即ndarray) 创建数组最简单的函数就是用array函数: ...
- Machine Schedule POJ - 1325(水归类建边)
Machine Schedule Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 17457 Accepted: 7328 ...
- Gym - 101848C Object-Oriented Programming (树链剖分+线段树+动态开点)
C. Object-Oriented Programming time limit per test 3.0 s memory limit per test 1024 MB input standar ...
- 「AtCoder Grand018B」Sports Festival(暴力)
题目链接B - Sports Festival 题意 n(1~300)个人m(1~300)个活动,\(A_{ij}\)表示i第j喜欢的活动,每个人选择在举办的活动里最喜欢的,因此可以通过选择一些活动来 ...
- 正睿 2019 省选附加赛 Day10
A 核心就是一个公式 \[\sum_{i = 0}^{k} S(k, i) \tbinom{x}{i} i\] S是第二类斯特林数 递推公式 \(S_2(n,k)=S_2(n−1,k−1)+kS_2( ...
- Scripting Languages 簡介
Scripting Languages 簡介 何謂 Scripting? 命令稿語言 scripting language 是什麼? 很難給一個嚴格的定義; 不妨看看最具代表性的幾個例子: perl, ...
- IT人员必须掌握的10项软技能
现代企业的IT部门员工在具备技术能力的同时,还需要掌握一些软技能.现在来看这些软技能其实并不是什么新鲜事物,只是IT人员所需的这些软技能的范围与数量正在不断增加着. IT人员需要具备哪些技术能力,要取 ...
- android 读取EXcel 文件 读取文件内存卡的权限
android 采用Java的读取xls文件的方式实现. 需要导入第三方Jxl.jar 包. 代码改自 其他博主 : 这只摘录下 读取xls文件的部分代码,当然这个代码在安卓平台需要添加下面的权限 ...