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. java第四周学习

    这一周学习的还是面向对象的方法和应用 Java中方法的使用和注意事项 如果没有返回值,就不允许通过return关键字返回结果 方法中不允许嵌套使用 Return返回值只允许返回一个值,不允许返回多个 ...

  2. SpringMVC 简单

    一.SpringMVC简介 SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 二.Spring结构图 ...

  3. Raspberry Pi + 3个USB摄像头 + Motion（简易监控设备配置记录1——介绍以及安装） 分类： Raspberry Pi 服务器搭建 2015-04-12 19:21 226人阅读 评论(0) 收藏

    参考: Debian官网链接 Motion官网链接 首先,参见Debian官网链接对Motion的介绍,网页中包含了所有相关依赖包,请首先确保这些依赖包的安装. Motion介绍 摘出对Motion的 ...

  4. [RxJS] Marble diagrams in ASCII form

    There are many operators available, and in order to understand them we need to have a simple way of ...

  5. [JavaScript] Array.prototype.reduce in JavaScript by example

    Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively ...

  6. System.Data.DbType 与其它DbType的映射关系

    System.Data.DbType 与其它DbType的映射关系 有如下类型的映射对照: System.Data.SqlClient.SqlDbType System.Data.OleDb.OleD ...

  7. java解析xml文件四种方式

    1.介绍 1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找 ...

  8. shell入门之变量测试 分类： 学习笔记 linux ubuntu 2015-07-10 15:49 31人阅读 评论(0) 收藏

    格式:test 测试条件 字符串测试: 注意空格: test str1 == str2 测试字符串是否相等 test str1 != str2 测试字符串是否不相等 test str1 测试字符串是否 ...

  9. 移动端 设置 小于12px 字体 初探

    1.移动端字号规范 2. 百度字号调研 3. 绕过12px 限制 4. 缩放 5. chrome  字号

  10. 10.24 noip模拟试题

    尼玛pdf依旧不会粘23333 /* 每段合并到总的里面 假设总的有X个 这一段有Y个 一共有X+1个空 那么就有 C(X+1,1)+C(X+1,2)+C(X+1,3)+...+C(X+1,Y) 这样 ...