• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

技巧:div+css设计网页时浮动问题的解决

前端 搞代码 7年前 (2018-06-17) 162次浏览 已收录 0个评论

前我最常用的方法有两种:

方法一:

使用块级clear,即声明一个块的类属性为.clear {clear:both;}

http://www.gaodaima.com/37767.html技巧:div+css设计网页时浮动问题的解决

方法二:

使用内联元素清理,比如说在主浮动内容后跟一个内联元素。

.inlineclear {clear:both;}
<span class=”inlineclear”></span>

方法三:使用双层div嵌套

#pubpage {display:block;clear:both;}
#main {display:block;float:left;}
<div id=”pubpage”>
<div id=”main”>
内容
</div>
</div>

这样用的话,内部的main就会把浮动给撑起来

方法四:

/******clear float*******/
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac /*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

加在一个想表示成块的容器的类属性上,但此属性必须为第一个,如<div class=”clearfix votelist” id=”votelist”>

第四种方法目前可以很好的兼容多种浏览器,并且不要加额外的元素就可以完成想要的布局,原文请看这里 http://www.positioniseverything.net/easyclearing.html

有了以上这几种方法,你在用div+css布局时就不会有那以多的苦恼了

欢迎大家阅读《技巧:div+css设计网页时浮动问题的解决》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:技巧:div+css设计网页时浮动问题的解决

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址