从品牌网站建设到网络营销策划,从策略到执行的一站式服务
CSS基础之清除浮动
成都创新互联专注于企业营销型网站、网站重做改版、鲁甸网站定制设计、自适应品牌网站建设、H5网站设计、商城开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为鲁甸等各大城市提供网站开发制作服务。本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的。本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝赐教。以下是我总结的三种行之有效而且比较简单实用的方法。
一、父级div定义伪类 :after
代码如下:
CSS基础之清除浮动 头部leftright底部
其中关键的部分为:
.father:after{ display: block; content: ""; clear: both; }
这里 content 的值尽量写为空或者不写,如果写其他值,则需添加多余的代码,举例如下:
.father:after{ display: block; height: 0; visibility: hidden; content: "清除浮动"; clear: both; }
虽然也能清除浮动,但多了一些不必要的代码。
二、在结尾处添加空的div标签
原理跟使用 :after 伪类一样,都是通过 clear: both; 来实现的。示例代码如下
CSS基础之清除浮动 头部leftright底部
三、父元素定义 overflow:auto;
HTML结构跟上面一样,CSS样式部分如下:
*{ margin:0; padding: 0; } #header,#footer{ width: 100%; height: 50px; background: #3ac; } .father{ margin: 10px auto; overflow: auto; } .float_left{ float: left; background: #a3f; width: 70%; height: 450px; } .float_right{ float: right; background: #f3f; width: 30%; height: 300px; }
这种方法使用起来很简单,但具有一定的局限性。内部宽高超过父级div时,会出现滚动条。
以上就是清除浮动的三种方法。另外如果父元素本身也是浮动的话,则父元素内就无需清除浮动。要根据实际情况选择可行的方法。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图