资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

网页布局方式如何使用清除浮动

这篇文章运用简单易懂的例子给大家介绍 网页布局方式如何使用清除浮动,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

在江油等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站建设、网站制作 网站设计制作按需开发,公司网站建设,企业网站建设,高端网站设计,营销型网站建设,外贸营销网站建设,江油网站建设费用合理。

盒子的高度问题

1.标准流中盒子的高度可以被内容高度撑起来;
2.浮动流中浮动的内容不能撑起盒子的高度;

为什么要清楚浮动?

相邻的盒子之间,如果前面的盒子没有高度,那么后面盒子中的浮动元素就会去找前面盒子中的浮动元素,这样会导致界面混乱,所以需要清除浮动;

清除浮动方式一:

解决方案:

给前面一个父元素设置高度

注意点:

在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少;

CSS:

   

body:

我是文字1

我是文字1

我是文字1

我是文字2

我是文字2

我是文字2

清除浮动方式二:

解决方案:

给后面的盒子添加clear:both;属性

clear属性取值:

none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素(也就是:不要和前面的左浮动元素显示在一行)
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素

注意点:

当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效;所以不推荐使用

CSS:

清除浮动方式三:

解决方案:

外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;并且设置clear: both;属性;

注意点:

外墙法它可以让第二个盒子使用margin-top属性,
外墙法不可以让第一个盒子使用margin-bottom属性,
不过可以通过设置额外标签的高度来实现margin效果;
搜狐中大量使用了这个技术,但是由于需要添加大量无意义的标签,所以不推荐使用;

CSS:


我是文字1

我是文字1

我是文字1

//外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;

我是文字2

我是文字2

我是文字2

清除浮动方式四:

解决方案:

内墙法:
1在第一个盒子中所有子元素最后添加一个额外的块级元素,
2给这个额外添加的块级元素设置clear: both;属性

注意点:

内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性

内墙法会自动撑起盒子的高度,所以可以直接设置margin属性

外墙法和内墙法区别?

外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

在企业开发中不常用隔墙法来清除浮动 (隔墙法:外墙法和内墙法)

CSS:

   

我是文字1

我是文字1

我是文字1

//设置内墙

我是文字2

我是文字2

我是文字2

关于 网页布局方式如何使用清除浮动就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享标题:网页布局方式如何使用清除浮动
标题链接:http://cdkjz.cn/article/igicsp.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220