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(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...
随机推荐
- Spring 使用介绍(九)—— 零配置(二)
三.Bean定义 1.开启bean定义注解支持 开启注解支持须添加以下配置项: <context:component-scan base-package="cn.matt"/ ...
- Codeforces1036F Relatively Prime Powers 【容斥原理】
题目分析: 这种题目标题写莫比乌斯反演会不会显得太恐怖了,那就容斥算了. gcd不为1的肯定可以开根.所以把根式结果算出来就行了. 辣鸡题目卡我精度. 代码: #include<bits/std ...
- ☆ [HDU2157] How many ways?? 「矩阵乘法求路径方案数」
传送门:>Here< 题意:给出一张有向图,问从点A到点B恰好经过k个点(包括终点)的路径方案数 解题思路 一道矩阵乘法的好题!妙哉~ 话说把矩阵乘法放在图上好神奇,那么跟矩阵唯一有关的就 ...
- fullcalendar 日历插件3.9.0 -- 基本插件使用
以下主要结构,直接执行即可以使用 ,仅用参考: html: <!DOCTYPE html> <html> <head> <title>test</ ...
- flask简单登录注册
效果图 发布问答页面需要登录才能访问,没有登录会跳转到登录页面 模板继承,正则验证,数据库迁移,md5加密 mysql 5.7 登录页面 登录后的发布问答页面,右上角会显示用户名和注销 项目代码:码云
- Codeforces1096G Lucky Tickets(NTT优化dp)
设\(f[i][j]\)表示填了\(i\)个数,数位和为\(j\)的方案数 于是方程为: \[f[i][j]=\sum_{k=0}^9 f[i-1][j-k]*[CanUse[k]==1]\] 其中\ ...
- poj 3080 Blue Jeans (暴力枚举子串+kmp)
Description The Genographic Project is a research partnership between IBM and The National Geographi ...
- C语言学习记录之一
1. while语句 2. 循环嵌套 3. 数组 4. 排序 1. while 由于上节课时间有限,介绍完for循环后没有来得及讲while语句.简单来讲,while也是一种循环结构,先看一个例子: ...
- 我们如何用Go来处理每分钟100万复杂请求的场景
在Malwarebytes我们经历了显著的增长,自从我一年前加入了硅谷的公司,一个主要的职责成了设计架构和开发一些系统来支持一个快速增长的信息安全公司和所有需要的设施来支持一个每天百万用户使用的产品. ...
- java 数组转字符串 字符串转数组
字符串转数组 使用Java split() 方法 split() 方法根据匹配给定的正则表达式来拆分字符串. 注意: . . | 和 * 等转义字符,必须得加 \\.多个分隔符,可以用 | 作为连字符 ...