css中float的用法
这篇文章主要为大家展示了“css中float的用法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中float的用法”这篇文章吧。
目前创新互联已为近千家的企业提供了网站建设、域名、虚拟空间、网站托管、服务器租用、企业网站设计、清江浦网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
float与margin
两个相邻的浮动元素,当第一个浮动元素(不论是左浮动还是右浮动)的宽度为100%时,第二个浮动元素会被挤到下面,通过添加负margin-right值(绝对值最少等于它自身的宽度),可以使它回到第一行。
在书写html代码时,我们通常的习惯根据UI样式,从左往右来写代码,但有时候右侧的内容比较重要,所以它的html结构需要放在左侧内容上面,让它更早的加载,比如:
左侧定宽流式布局
* {margin:0; padding:0;} li {list-style: none;} a {text-decoration: none;} body {font-family: '微软雅黑';} .wrap { width: 800px; margin: 50px auto; } .content { float: right; margin-left: 100px; } .date { font-size: 14px; color: #666; } .text { margin: 20px 0; } .avatar { float: left; margin-right: -80px; } .avatar img { width: 80px; height: 80px; border-radius: 50%; }
如上面图的效果,尽管在UI上,.content元素在.avatar右边,但我们在html结构中,仍然需要把.content元素放到.avatar元素前面,这个时候就可以通过给.content元素设置为右浮动,然后给.avatar元素设置左或者右浮动,再添加负margin-right值,让它回到上面。
1.左右两侧都不定宽
效果图:
html代码:
核心点:
.avatar元素左浮动,.content元素的display属性设为table-cell,其实这里的.content元素不一定非要设置display为table-cell才行,只要是能触发BFC/haslayout的就行,比如:
float:left/right position:absolute/fixed overflow:hidden/scroll(IE7+) display:inline-block/table-cell(IE8+)
不过因为这里的.content元素是自适应的,不能定宽,而且里面包含块级元素,所以只能设置overflow属性。
css代码:
* {margin:0; padding:0;} li {list-style: none;} a {text-decoration: none;} body {font-family: '微软雅黑';} .wrap { width: 800px; margin: 50px auto; } .avatar { float: left; margin-right: 20px; } .avatar img { width: 80px; height: 80px; border-radius: 50%; } .content { display: table-cell; } .date { font-size: 14px; color: #666; } .text { margin: 20px 0; }
2.右侧定宽流式布局
效果图:
html代码:
核心点:
1:当第一个浮动元素的宽度为100%时,第二个元素会自动换行,紧挨着第一个元素,这时可以给第二个浮动元素添加负margin值,使它上去
2:第一个浮动元素.content外面有一个包裹元素,方便给.content元素添加padding-right值,让左边的内容和右边图片之间留出空隙
其实双飞翼布局的思想也是包含上面两点。
css代码:
* {margin:0; padding:0;} li {list-style: none;} a {text-decoration: none;} body {font-family: '微软雅黑';} .wrap { width: 800px; margin: 50px auto; } .item { padding-bottom: 15px; border-bottom: 1px solid #ccc; overflow: hidden; } .content { float: left; padding-right: 180px; } .avatar { display: inline-block; width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; overflow: hidden; } .avatar img { width: 100%; height: 100%; } .name { vertical-align: middle; } .date { font-size: 14px; color: #666; vertical-align: middle; } .title { display: block; padding: 10px 0; font-size: 18px; font-weight: bold; line-height: 1.5; color: #333; } .thumbnail { float: left; margin-left: -120px; } .thumbnail img { width: 120px; height: 120px; } .meta { margin-top: 15px; font-size: 14px; } .category-tag { display: inline-block; padding: 0 8px; margin-right: 10px; border: 1px solid #ea6f5a; border-radius: 3px; color: #ea6f5a } .msg-tag { color: #999; }
3.两侧固定,中间自适应的三栏布局
现在三栏布局很少了,如果要用到,请直接百度双飞翼布局或者圣杯布局。
以上是“css中float的用法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享标题:css中float的用法
分享地址:http://scyanting.com/article/gsdjgi.html