【转: CSS中float和clear的理解】的更多相关文章

转: CSS中float和clear的理解

float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">11111</div><div style="width:150px">2222</div> 这样我们就设置了两个div,一个宽度100px,一个宽150px,可预览一下,我们的div仍在两行上,那么怎么把它改到一行上呢,这儿就需要float,设置第一个div的…

CSS中float和Clear的使用

CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向. CSS中Float和Clear属性用法 实现多栏排版的最好方法是使用float属性,float也是一个将使你受益匪浅的属性.一个float对象可以居左或居右,一个设置为float的对象,将根据设置的…

关于css中float的理解

感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看效果.在这篇博客里做个总结. 1. 设置float后对后面元素的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…

CSS的float与clear

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的. 注意,以上这些理论,是指标准流中的div. 小菜认为,无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”. 显然标准流已经无法满足需求,这就要用到浮动.        浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次. 例如…

CSS中float属性和clear属性的一些笔记

在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定义了四个div区域: <div id="div_1"> 风风风风风风风f风 </div> <div id="div_2"> 火火火火火火火火 </div> <div id="div_3">…

解决CSS中float:left后需要clear:both清空的繁琐步骤(转)

  之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/ 2.inline-block方式: ul {text-align:center;font-f…

解决CSS中float:left后需要clear:both清空

现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/ 2.inline-block方式 ul {text-align:center;font-family:simsun;font-size:14px;} li {display:inline-block;*display:inline;zoom:1;margin-righ…

【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 简单来讲,我们可以把它理解为,我们在进行盒模型布局的时候,如果一个元素符合了成为BFC的条件,该元素成为一个隔离了的独立容器,元素内部元素会垂直的沿着其父元素的边框排列,和外部元素互不影响 .比如浮动元素会触发BFC,浮动元素内部的子元素主要受到该浮动元素的影响,而两个浮动元素之间是互不影响的. 在…

css中float left与float right的使用说明

转自:http://www.jb51.net/css/33740.html   脚本之家 No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度. 4.子元素全为浮动元素的元素高度自适应问题. 以下详细分析四个问题. 一.浮动元素自动变块级元素 首先说说块级元素和行内元素区别,简单的来说,…

css中position:relative的真正理解

其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的. position属性是用四种定位.默认的是static. position:absolute(绝对定位) ——是脱离文档流,相对于父级元素(包含这个position:relative)定位,当然如果没有,那就是相对于body定位的. position:relative(相对定位) ——单独使用,…