问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
想做一个左侧固定220px，右侧随屏幕大小自适应的的布局，对于
float的使用
有些困惑，望各位前辈不吝赐教！
&!DOCTYPE html&
&title&左侧固定，右侧实现随屏幕宽度大小自适应&/title&
&meta charset="utf-8"&
&style type="text/css"&
*{margin: 0;padding: 0;}
#left {background-color:width: 220float: }
#content { width: 100%;border: solid red 1}
#contentInner {margin-left: 220background-color:}
&div id="left"&Left Sidebar&/div&
&div id="content"&
&div id="contentInner"&Main Content&/div&
关于float的问题（以下各div块都用其id指代），如果在left中设置属性margin-top:50px。left会向下移动50px距离，content不动。但如果是在content中设置属性margin-top:50px，虽然content向下移动了50px的距离，但是left居然跟着一起下去了,这是什么情况？left设置了float:left后不是已经脱离文档流了吗？如果在content中设置float:left后，left又会回到顶上...为什么？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
有两个要点。
一是垂直外边距合并。div#content元素设置了margin-top，由于它和它的父元素（这里就是body）之间并没有间隙（例如border、padding），会发生垂直外边距合并。因此，此时margin-top相当于作用在了body上，所以浮动元素div#left的初始排版位置就会改变到那个地方。你可以试试为body增加padding-top: 1，这时候就有了间隙，也就不会发生合并。
二是浮动元素的特性。浮动元素在垂直外边距合并的规则里，算作有间隙的情况。因此，div#left元素设置margin-top并不会发生合并。
你可以简单看看。
要实现左侧固定，右侧随屏幕大小适应的布局，我认为比较合适的写法是：
&div class="l-container"&
&div class="l-sidebar"&&/div&
&div class="l-main"&&/div&
.l-container:after{
content: "";
.l-sidebar{
width: 220
margin-left: 220
如果需要上边距，可以考虑在各部分内部增加div，设置padding-top。这可以很好的避免垂直外边距合并带来的困惑。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&!DOCTYPE html&
&title&左侧固定，右侧实现随屏幕宽度大小自适应&/title&
&meta charset="utf-8"&
&style type="text/css"&
*{margin: 0;padding: 0;}
div { height :20}
#left {background-color:width: 220float: }
#content { width: 100%;border: solid red 1margin-top:20px}
#contentInner {margin-left: 220background-color:}
&div id="left"&Left Sidebar&/div&
&div style="clear:both"&&/div&
&div id="content"&ppppppp&/div&
需要清除left的浮动.
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&!DOCTYPE html&
&title&左侧固定，右侧实现随屏幕宽度大小自适应&/title&
&meta charset="utf-8"&
&style type="text/css"&
*{margin: 0;padding: 0;}
#left { width:220 background-color:width: 220float: }
#content { width: 100%;border: solid red 1}
#contentInner {float: background-color:}
&div id="left"&Left Sidebar&/div&
&div id="content"&
&div id="contentInner"&Main Content&/div&
float如果要用则同一行同级其他元素全都要使用
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
是人品吗，我用你的代码可以实现你说的效果
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 Appfloat属性定义了元素可以往哪个方向浮动，float常见的值有：
元素向左浮动。
元素向右浮动。
默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
但是常常在设置了float属性后，其后的一些元素位置变得混乱了，如下图是我原本的布局
当我把元素设置浮动后，原本在下方的图片也跑到右侧横向排列了：
是因为在设置块级元素浮动时，设置浮动后，会影响紧邻它后面的那一个元素！
块级元素（ul）和是纵向排列，行级元素（img）都是横向排列，float属性能够使纵向排列的块级元素横向排列。但是同时 可能会影响 设置float属性的元素下一个元素的位置，这时只要在对下一个CSS设置clear：both或者overflow：hidden。就可以消除这种影响。
*clear: both;*
border: 1px solid #b1adad;
width: 300px;
height: 300px;
添加代码这句代码后，就可以得到我想要的效果啦！
在使用CSS对元素设置样式的时候，元素有块级元素和行级元素之分，知道一些常见的行级元素和块级元素在使用的时候可以避免一些不必要的错误。
在父标签没有设置浮动，而子标签设置浮动后也可能会影响到父标签，这时clear：both不起作用，要用overflow：hidden来消除影响。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：835次
排名：千里之外
(1)(1)(3)(1)你正在使用的浏览器版本过低，将不能正常浏览和使用知乎。css中float、position与z-index属性简介 - 环新网络随笔 - 74&
文章 - 0&评论 - 248&trackbacks - 0
　　本篇主要介绍float属性：定义元素朝哪个方向浮动。
1. ：介绍文档流、浮动层以及float属性。
2.& ：介绍float为 left 时的布局方式。
3. &：介绍float为 right 时的布局方式。
4.&：介绍相邻元素含有float属性时的布局方式。
1. 页面布局方式
页面布局方式，主要包含：文档流、浮动层、float属性。
1.1 文档流
HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。
1.2 浮动层
浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
1.3 float 属性介绍
　　① left ：元素向左浮动。
　　② right ：元素向右浮动。
　　③ none ：默认值。
　　④ inherit ：从父元素继承float属性。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&2.3-float属性&/title&
&style type="text/css"&
background-color:Red;
height:50px;
width:<span style="background-color: #f5f5f5; color: #px;
background-color:Yellow;
height:50px;
width:<span style="background-color: #f5f5f5; color: #px;
background-color:Blue;
height:50px;
width:<span style="background-color: #f5f5f5; color: #px;
background-color:Gray;
height:50px;
width:<span style="background-color: #f5f5f5; color: #px;
&div id=a &div-a&/div&
&div id=b&div-b&/div&
&div id=c&div-c&/div&
&input type="text" value="input1"
&input type="text" value="input2" /&
&input type="text" value="input3 " /&
&div id=d&div-d&/div&
&input type="text" value="input4 " /&
2. float:left
说明：元素向左浮动。
2.1 代码变更
input2 添加：float:left
div-b 添加：float:left
div-d&添加：float:left
2.2 变更后视图
　　① 浏览器的宽度&不够长&时
　　② 浏览器的宽度"够长"时
当前元素分类(float:left)
下一个紧邻元素分类(不含float)
块级元素(a)
块级元素(b)
b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。
内联元素(b)
b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。
内联元素(a)
块级元素(b)
b不会跟随a的移动。
内联元素(b)
b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。
3. float:right
说明：元素向右浮动。
3.1 代码变更
input2元素：添加 float:right
div-b 添加：float:right
div-d&添加：float:right
3.2 变更后视图
　　① 浏览器的宽度&不够长&时
　　② 浏览器的宽度"够长"时
当前元素分类(float:right)
下一个紧邻元素分类(不包含float)
块级元素(a)
块级元素(b)
b会填充a遗留下来的空间，若a会和b发生重叠(父容器宽度减少)，a的图层在上面。
内联元素(b)
b会填充a遗留下来的空间。
内联元素(a)
块级元素(b)
b不会跟随a的移动。
内联元素(b)
b会填充a遗留下来的空间。
4. 相邻元素含有float属性&
因内联元素的特性，最好别把内联元素与块级元素相邻使用float属性。
下面都以块级元素为例：
默认视图：
4.1 float:left
　　　　给这三个div都添加 float:left
4.1.1 视图
　　　　①浏览器的宽度"足够长"
　　　　②浏览器的宽度"不够长"
4.1.2 结论
　　　　Ⅰ 相邻的浮动元素，left属性最前面的元素，排在最左面。
　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。
4.2 float:right
　　　　给这三个div都添加 float:right
4.2.1 视图
　　　　①浏览器的宽度"足够长"
　　　　②浏览器的宽度"不够长"
&4.2.2 结论
　　　　Ⅰ 相邻的浮动元素，right属性最前面的元素，排在最右面。
　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。
4.3 height高度不等的块级元素
把div-a的height值设为大于div-b，三个div都添加 float:left后：
4.3.1 视图
　　　　①浏览器的宽度"足够长"
　　　　②浏览器宽度缩小时
　　　　③浏览器宽度进一步缩小时
4.3.2 结论
　　　　Ⅰ height不相等的div浮动元素排序时，照拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。
4.3.3 解决浏览器宽度缩小变形
　　　　把添加float的属性的div元素嵌入在一个div中，并给此div添加width和height属性。浏览器宽度缩小时，也不会发生变形。
　　　　可参照&
==================================系列文章==========================================
本篇文章：2.3 &CSS float 浮动属性
阅读(...) 评论()}