css浮动的实例

2016-02-19 23:29 6 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的css浮动的实例,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

css浮动

结论,非浮动元素可以为后面的浮动元素定位, 但是 浮动元素无法再为其后的非浮动元素定位。

No-float A + Float B + No-float C

c和b 会按照A的边界进行定位,

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
HTMLHEADTITLECSS TEST/TITLE
style type=text/css
body{
text-align: center;
background: #000;
}
#container{
width:778px;
background: #e3e3e3;
margin:0px auto;
}
#idParentDiv{
width:760px;
margin:0px auto;
text-align:left;
}
#boxleft{
width:200px;
height:80px;
background-color:yellow;
}
#boxmiddle{
float:left;
width:250px;
height:100px;
background-color:red;
}
#boxright{
width:250px;
height:120px;
background-color:blue;
}
/style
body
div id=container
        div id=idParentDiv
                div id=boxleftboxleft---width:200px;height:20px;color:#FFFFFF;background-color:yellow;letter-spacing:0px;  /div
                div id=boxmiddleboxmiddle---float:left;width:250px;height:30px;background-color:red;/div
                div id=boxrightboxright----width:250px;height:50px;background-color:blue;/div
        /div
/div
/body
/html

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

点击这里返回本站的 网页设计教程 频道

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1630029.html

延伸阅读
标签: Web开发
一个多月前总结了《清理浮动的全家》,当时看了之后没什么新鲜的东西也就忽略了,今天偶然又翻到那篇文章,想到了另外一个的方法(N久前在书店翻到的),在网上没看到有人提起过,写出来大家一起讨论下。 HTML: CSS: Firefox下效果:   可见,ul的黄色背景并没有显示出来。 重点来了: 在CSS理加上如下代码 ...
标签: Web开发
在上一个文章里写了关于左(右)侧定宽右(左)侧自动缩放的两列浮动,这个文章就要说一下三列浮动的问题了。在之前说过,两列浮动是其他多列浮动的基础,明白了两列浮动的原理后,三列或三列以上的多列浮动也变得简单。 左侧中间定宽,右侧自适应: 因边左侧跟中间都是定宽的,只有右侧是自适应宽度的,所以这个三列浮动是和两...
标签: Web开发
CSS浮动一直是个比较让人郁闷的问题,很多的布局问题都出在浮动上,特别是当浮动的列数很多时,但其实只要理解了两列结构的浮动,面对多列数的浮动也不会再心慌,因为两列结构的左右浮动是最基本的浮动,也是更多浮动的基础,三列、四列等的浮动都是出于此的。 来看一下几种常见的CSS两列浮动,CSS代码见以下各分类,HTML结构代码如下...
标签: Web开发
清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动。 /* 清理浮动 */ .clearfix:after {  visibility:hidden;  display:block;  font-size:0;  content:" ";  clear:bo...
标签: Web开发
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父...

经验教程

970

收藏

8
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部