从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章给大家分享的是有关CSS定位机制中的浮动种类有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联公司:公司2013年成立为各行业开拓出企业自己的“网站建设”服务,为千余家公司企业提供了专业的成都网站建设、网站设计、网页设计和网站推广服务, 定制网站由设计师亲自精心设计,设计的效果完全按照客户的要求,并适当的提出合理的建议,拥有的视觉效果,策划师分析客户的同行竞争对手,根据客户的实际情况给出合理的网站构架,制作客户同行业具有领先地位的。
CSS有三种基本的定位机制:相对定位、浮动和绝对定位。接下来讲解一下浮动的定位代码。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
1.当都不设置浮动时:
#main {
border: 1px solid #000;
padding:10px;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
css——定位
2.当设置box1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了box1 2,使box12从视图中消失。
#main {
border: 1px solid #000;
padding:10px;
} .box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
.box1 {
float:left;
}
css——定位
3.当都设置为浮动时,box1向左浮动直到碰到包含框,另外两个box向左浮动直到碰到前一个浮动框。
#main {
border: 1px solid #000;
padding:10px;
overflow: hidden;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
float: left;
}
css——定位
4.清除浮动,要想阻止行框围绕浮动框,需要对该框应用 clear属性。clear属性的值可以是 left、right、both或 none,它表示框的哪些边不应该挨着浮动框。
感谢各位的阅读!关于“CSS定位机制中的浮动种类有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图