这个东西叫浮动。
顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。
正常情况下,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. import logging报错raise notimplementederror 'emit must be implemented ' ^

    在导入logging的时候出现这个错误 大概看了一下,就是因为python内置里面已经有logging这个模块,所以不需要再安装 在site-packages里面找到关于logging的文件,删掉 重 ...

  2. JVM安全点操作与测试小记

    JVM的安全点学习与代码测试 监控安全点(打印JVM停顿时间,不止GC,处理毛刺): -XX:+PrintGC -XX:+PrintGCApplicationStoppedTime 取消偏向锁: -X ...

  3. html概念

    一.前端 1.什么是前端 前端即网站前台部分,运行在PC端等浏览器上展现给用户浏览的网页.随着互联网技术的发展, HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美 ...

  4. python中的logging模块学习

    Python的logging模块 Logging的基本信息: l  默认的情况下python的logging模块打印到控制台,只显示大于等于warning级别的日志 l  日志级别:critical ...

  5. 【XSY1301】原题的价值 第二类斯特林数 NTT

    题目描述 给你\(n,m\),求所有\(n\)个点的简单无向图中每个点度数的\(m\)次方的和. \(n\leq {10}^9,m\leq {10}^5\) 题解 \(g_n\)为\(n\)个点的无向 ...

  6. git 本地推送远程仓库报错: error: failed to push some refs to 'https://github.com/yangtuothink/mxonline.git'

    报错现象 添加远程仓库后 推送代码的时候报错 报错分析 远程代码和本地代码不匹配问题 远程初始仓库的创建有些默认 的 README什么的本地是没有的 需要先同步后再上传 报错解决 git push - ...

  7. MT【302】利用值域宽度求范围

    已知$f(x)=\ln x+ax+b (a>0)$在区间$[t,t+2],(t>0)$上的最大值为$M_t(a,b)$.若$\{b|M_t(a,b)\ge\ln2 +a\}=R$,则实数$ ...

  8. MT【295】线段比的仿射变换

    已知$F_1,F_2$分别为椭圆$\dfrac{x^2}{4}+\dfrac{y^2}{3}=1$的左右焦点.$A,B,C$是椭圆上$x$轴上方的三点,且$AF_1//BO//CF_2$,则$\dfr ...

  9. BUG关闭原因

    已解决:缺陷已经修复. 重复缺陷:是指在系统里相同原因的缺陷已经被其他人报告.在此缺陷被作为重复缺陷返回时,先不要立即取消.必须等到核查修复后,才在系统里取消.这是因为有些缺陷被误认为是重复缺陷,实际 ...

  10. UVA 11149-Power of Matrix(等比矩阵求和)

    给定一个矩阵A 要求A + A^2 + A^3 +…. A^k: 对于到n的等比矩阵求和 如果n是偶数:  如果n是奇数:  #include<stdio.h> #include<s ...