float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

float:浮动;left:左;就是往左浮动。用来布局,差不多就是底下的一块上来的话,往左靠。

比如A和B同行float:left了,这时候有个C不想float:left 和AB同一行, 
就可以给C来个clear:left,这样C就可以在另一行了

左浮动,靠左显示

clear:both;在css中,首先我们理解一下clear,顾名思义就是清除的意思,both的意思是全部,那连起来就是清除全部样式,不过这个样式主要是用于对多个div浮动的清除,如float:left,如果不清除,很容易对下面的div造成显示错位

css 中 的 float :left 和 clear :both的更多相关文章

  1. 关于CSS中的float可能出现的小问题

    关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...

  2. 文档流 css中的float clear与布局

    文档流 先说说什么是文档流  流是什么 就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;" ...

  3. 如何理解css中的float

    最近一段时间一直在为一个即将上线的新站进行一些前端开发.自然,对CSS的使用是必不可少的了.我们在CSS 中很多时候会用到浮动来布局.常见的有 float:left 或者 float:right .简 ...

  4. css中的float属性以及清除方法 (2011-09-03 17:36:26)

    CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div ...

  5. CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法

    在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...

  6. CSS中的float与clear

    参考: http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html http://www.cnblogs.com/iloveyou ...

  7. [转][译]关于CSS中的float和position和z-index

    原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...

  8. CSS中正确理解浮动以及clear:both的关系

    要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...

  9. [译] 关于CSS中的float和position

    原文 http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...

随机推荐

  1. Android 仿PhotoShop调色板应用(一)概述

    版权声明:本文为博主原创文章,未经博主允许不得转载. 在前面的系列我已经将Android中颜色渲染的原理及使用做了一个整体上概述. 现在开始根据一个比较复杂的实现进行具体的分析,这就是PhotoSho ...

  2. Phonegap(Cordova)3.4 + Android 环境搭建

               PhoneGap是一个用基于HTML.CSS和JavaScript的,创建移动跨平台移动应用程序的高速开发平台. 它使开发人员可以利用iPhone,Android,WP7等多 ...

  3. UVa 993: Product of digits

    这道题很简单.先将N用2,3,5,7(即10以内的素数)分解因数(需要先特殊判断N不为1),然后将可以合并的因数合并(如2*2合并成4,)这样求得的结果位数会减少,大小肯定会小一些.具体实现见代码. ...

  4. spring mvc DispatcherServlet详解之四---视图渲染过程

    整个spring mvc的架构如下图所示: 现在来讲解DispatcherServletDispatcherServlet的最后一步:视图渲染.视图渲染的过程是在获取到ModelAndView后的过程 ...

  5. iOS--iOS7摄像头识别二维码功能

    iOS–iOS7摄像头识别二维码功能 属性介绍: AVFoundation 框架基于以下几个类实现图像捕捉 ,通过这些类可以访问来自相机设备的原始数据并控制它的组件. AVCaptureDevice ...

  6. objective-c 中的关联介绍

    objective-c 中的关联介绍 转载请注明CSDN博客上的出处: http://blog.csdn.net/daiyibo123/article/details/46471993 如何设置关联 ...

  7. linux安装总结(亲测)

    一:磁盘分区情况 NTFS,FAT32 这是两种常用的磁盘格式 windows7自带的磁盘工具也可以分出上面的格式,用软件也可以.但是FAT32最大的复制文件进去的限度时4G. EXT3只能用软件才能 ...

  8. [转] react-native 之布局篇

    PS: 苹果使用的宽度单位是为了设计开发者在应用上使用接近的数值.比如宽度范围都在320-414之间.但是宽度对应到像素是有一个转换比例的,对于背景图尤其要准备足够像素的图片.这个足够像素可以通过公式 ...

  9. [转] 用管道获得shell 命令的输出

    用管道: 通过fgets(buf, n, ptr)buf就可以得到命令“ps -ef"一样的信息, 读帮助”man popen": char *cmd = "ps -ef ...

  10. 前端高性能滚动 scroll 及页面渲染优化

    前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...