float学习

2014年8月24日01:11:15

又不好意思的晚睡了

放代码吧

floatTest.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="common.css" />
</head>
    <body>
    <div class="floatTest">
    <div class="floatTestLeft">布局靠左浮动</div>
    <div class="floatTestMiddleHigher">布局靠左浮动</div>
    <div class="floatTestRight"><p>这个在这一层里面不是最高的</p></div>
    <div class="floatTestClear"></div><!-- html注释：清除float产生浮动 -->
    <div class="lastBlock"><p>清除浮动布局之后，比照上一层最高的</p></div>
    </div>
    </body>
</html>

common.css中的相关代码

/*下面的是floatTest.html的样式表 */
.floatTest{ width:800px;padding:10px;border:1px solid #F00}
.floatTestLeft{ float:left;width:150px;border:1px solid #00F;height:50px}
.floatTestMiddleHigher{ float:left;width:150px;border:1px solid #BA0;height:80px}
.floatTestRight{float:left;width:150px;border:1px solid black;height:70px}
.floatTestclear{clear:both}
.lastBlock{width:150px;border:1px solid #00F;height:50px}

效果图

好饿啊。。。。

时间： 2024-08-24 04:08:21

float学习的相关文章

CSS重要属性之float学习心得

我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定 6.4:智能布局 1:float属性 float,顾名思义是漂浮,

css重要属性float学习

1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定 6.4:智能布局 1:float属性 float,顾名思义是漂浮,浮动的意思.但是在css中,它被理解成浮动.float有四个属性,

CSS属性之float学习心得

全文参考:http://www.linzenews.com/program/net/2331.html 我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6

前端HTML中float学习笔记

也就是说本来你排好的界面设计,但是因为浮动会导致元素脱离文档流,使得其他非浮动的块级元素会无视这个浮动元素所占据的空间,或者是内联元素的变化,导致排版出现问题. 常见的float带来的问题: 这就是问题的所在,那么如何对这些问题进行解决的同时有不会使float失去效果呢? 参考资料: http://www.iyunlu.com/view/css-xhtml/55.html http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.ht

css float浮动清除

1.标准文档流下的div的显示特点 现有3个div,父级div命名为:divmain,同级子div分别命名为:div-left,div-right. 当我们不使用div浮动的时候,正常文档流(normal document)情况下,代码及显示效果如下所示: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 5 <meta charset="UTF-8"> 6 <tit

CSS学习之float解析

转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.下面解释下这个定义中的几个名词的概念: 文档流:在html中文档流即为元素从上至下排列的顺序. 脱离文档流:元素从正常的排列顺序被抽离. 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding). 二.float

CSS px, em, 和rem； float以及clear(第一篇学习)

px:相对长度,相对于屏幕分辨率: em:相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.  任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em

WEB前端开发学习----5.理解 CSS 浮动float

首先需要明白两个概念:内联元素 , 块元素. 内联元素 :也叫做行内元素,可以容纳文字或其他内联元素.内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度,不会进行换行.常见的内联元素:<span></span>, <a></a>, <img></img>, <font></font>, <strong></strong>等 块元素:可以容纳文本,其他内联元素和块元素.可

CSS学习笔记——CSS中定位的浮动float

昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么? 第一个问题:浮动到底是怎么样的? W3CSCHOOL对浮动属性的解释:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.所以浮动也有left.right.none三种. 我个人的理解是:HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而