摘要：这种方法的局限性在于，必须设置父元素的高度为固定，因为的子元素已经脱离文档流，不能撑开父元素，或者会遮盖同级的兄弟元素。
三列布局，中间自适应，尝试了两种方法
float
.mydiv{
background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto;
}
.left {
float: left; width: 160px; height: 100px; background: blue; padding: 20px;
}
.right{
float: right; width: 80px; height: 300px; background: blue; padding: 20px;
}
.middle{
margin-left: 220px; margin-right: 140px; background: red; height: 200px; padding: 20px;
}
.clearfix{
clear: both;
}
看到一篇文章：http://www.barelyfitz.com/screencast/html-training/css/positioning/，里面有这么一句话：
We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it.
“wrap around it”非常重要，float与absolute有类似的功能，在这一点上却大不相同，下面会讲到。
position
mydiv{background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; position: relative;
}
left {position: absolute; left: 20px; width: 160px; height: 100px; padding: 20px;
}
right{position: absolute; right: 20px; width: 80px; height: 260px; padding: 20px;/*absolute已经脱离文档流，无法撑开父元素;*/
}
middle{margin-left: 220px; margin-right: 140px; height: 200px; padding: 20px;
}
需要设置父元素为relative，子元素的absolute才会相对于父元素绝对定位。
这种方法的局限性在于，必须设置父元素的高度为固定，因为absolute的子元素已经脱离文档流，不能撑开父元素，或者会遮盖同级的兄弟元素。
也就是说这种方法不能自适应高度布局。对于子元素高度不确定的情况这种方法也就不能使用了。当然用js脚本进行控制也可以。
关于absolute和float区别。
absolute是完全脱离文档流，两个设置了absolute的元素甚至都可以互相覆盖。
而关于float，W3C手册中有这么一句话：由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
对于普通流中的块框不存在，也就是说对于float元素、文档中的行内元素，浮动元素是存在的。表达有点晦涩？？？具体的说，float:left遇到float:left,会停下来并排显示而不是覆盖。而对于行内元素：图片和文字，会“wrap around it”，就是包围float元素。
但是float和absolute都会出现无法撑开父元素的问题：
这时候absolute就比较鸡肋了，在多栏不确定高度的布局中，absolute没有办法解决父元素自适应高度的问题（参考：http://www.barelyfitz.com/screencast/html-training/css/positioning/）而float可以有一些清除float的方法，上面采用了overflow: auto;和.clearfix方法。清除浮动绝对是个大问题，接下来也会继续学习。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49781.html
摘要：这种方法的局限性在于，必须设置父元素的高度为固定，因为的子元素已经脱离文档流，不能撑开父元素，或者会遮盖同级的兄弟元素。 三列布局，中间自适应，尝试了两种方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { ...
摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的 布局 描述 表示对页面中的显示效果进行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一种方式 水平居中 + 行内块级元素（text-a...
摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的 布局 描述 表示对页面中的显示效果进行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一种方式 水平居中 + 行内块级元素（text-a...
1、定位 我是左边，我是固定的 我是中间，我是自适应的，左边右边都position固定了，他们脱离了文档流，我终于得到机会挤进中间啦！只要我margin一下就没人会挡住我啦！我可真是个小机灵鬼(同时，我还是个自由人，我div写在开头中间结尾都可以呢) 我是右边，我也是固定的 *{ margin:0; padding: 0; } .l...
阅读 1761·2021-11-24 09:39
阅读 1550·2021-11-16 11:54
阅读 3496·2021-11-11 16:55
阅读 1654·2021-10-14 09:43
阅读 1444·2019-08-30 15:55
阅读 1232·2019-08-30 15:54
阅读 3420·2019-08-30 15:53
阅读 1337·2019-08-30 14:18
