摘要：做了后有一些不好的影响。设置值不能正确显示由于浮动导致父级子级之间设置了属性的值不能正确表达。只有左侧设置为，右侧设置，右侧将会占据整个右侧剩余宽度。
float
做了float后有一些不好的影响。
1、背景不能显示 由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 2、边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。 故需清除浮动1 、父div设置合适高度
2 、在要做float的div后，可以在html加一个空的div，或者在css在其父元素用after中 content:";，
而后写
clear:both;（有一些浏览器不写这句就不作用
display:block;
（最好再写上width:0;height:0;visibility:hidden;保证这个元素看不见，不影响布局）
（建议是用after）
3、父级div定义overflow:hidden（或overflow：auto）
（注意：给导航栏多带带每一项加下划线时不要用3，因为会把下划线隐藏）
（还有一些奇奇怪怪不好用的方法，比如把父元素也设置浮动，就不提了）
div
默认一个div占一行，那么如何让多个个div同一行？
1、用float
如果分两列，可以先把两列的div分别包含在两个div里面
如果分三列，要都float：left，或者两个float：left一个float：right；
缺点：如果右边div没有设置宽度，右边div的宽度会根据div里的内容自动调整，不易控制。
2、只有左侧div设置为float:left，右侧div设置overflow:auto;，右侧div将会占据整个右侧剩余宽度。
缺点：如果有多个div 比如三个及以上了？
3、使用display的inline-block属性(不用inline，inline高度不可控)
（会上下错位，原因：
①同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline
②对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线
解决方案：
改变vertical-align属性（右侧div设置vertical-align: top;）
4、①对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面
②左边固定宽度，使用position:absolute
③右边margin-left为左边一块的固定宽度
(此处暂时不考虑弹性盒子，我先练习不用弹性盒子的)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1774.html
摘要：不管是左是右，反正就是一边宽度固定，一边宽度自适应。博客园的很多主题也是这样设计的，我的博客园博客也是右侧固定宽度，左侧自适应屏幕的布局方式。与配合使用首先我们调整一下结构自适应区固定宽度区代码这样实现，的实际宽度就是屏幕宽度。 我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式：1.左右结构，左边100%；右边宽度固定2.左右结构，左边固定，右边100%...
摘要：所有权保留，请勿用于商业目的。年月日补充写过这篇博客之后，又陆续读过几篇关于布局的文章。移动开发在必要情况的下，可以适当使用来调整字体大小，但做成完全自适应则是一种存在问题的做法。 本文作者: 文蔺本文地址: http://www.wemlion.com/2015/a...本文由 @文蔺 创作，转载请保留此声明。 所有权保留，请勿用于商业目的。 【资源一】基础知识恕不回顾 基础知识参考...
摘要：常用模式片段之摘要第一次看到这个字眼是在中，即。之后也见到一些别人的代码里有，它和页面的有什么关系，以及和有何渊源。以前都见过这些词，但都似懂非懂，今天查了些资料收集了些代码，做个完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性质...
摘要：常用模式片段之摘要第一次看到这个字眼是在中，即。之后也见到一些别人的代码里有，它和页面的有什么关系，以及和有何渊源。以前都见过这些词，但都似懂非懂，今天查了些资料收集了些代码，做个完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性质...
摘要：左右结构，左边右边宽度固定代码代码左右结构，左边固定，右边代码代码左中右结构，左边固定，右边固定，中间代码代码这里是左边这里是中间这里是右边 1.左右结构，左边100%；右边宽度固定 showImg(http://segmentfault.com/img/bVbSYw); css代码： #header{height:80px; background:#CCC;} #center{ov...
阅读 2980·2021-10-13 09:39
阅读 2680·2021-09-27 13:34
阅读 2016·2019-08-30 15:55
阅读 3230·2019-08-30 15:43
阅读 3602·2019-08-30 11:16
阅读 1724·2019-08-26 18:28
阅读 1081·2019-08-26 13:56
阅读 896·2019-08-26 13:35
