大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天小编给大家分享一下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; }
以上就是“css中的float怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。