css浮动的实例

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

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

【 tulaoshi.com - Web开发 】

css浮动

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

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

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

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

!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

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

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

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

延伸阅读
标签: Web开发
Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的。 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的(我只...
标签: Web开发
在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF、OP、IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了。 方法真的很简单,只要为需要清浮动的标签加上overflow这个属性。 CSS代码 ul{ list-style:none; height:auto; margin:0;p adding:0; background-color...
标签: 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)以撑大...

经验教程

166

收藏

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