前端开发 布局问题_浮动

上海张江前端开发薪资|web前端开发可以自学吗|前端开发和网页设计一样吗

第一，左侧定宽，右侧自适应。
html 代码

反思：在我运用这个浮动时，我脑海中的印象是我需要把左右两边的div都增加float：left这个属性。
但是实际上，当我加上float的时候，这个就出现问题了。
html 代码

原先一直想不通，不是说加了浮动就可以在同一行上显示了吗？为什么会出现这样的情况？
然后，询问了群里的大神们，发现一些以前忽略的东西。
关于float属性，所有主流浏览器都支持浮动，但是任何的版本的IE（包括IE8）都不支持属性值：“inherit”；在 css 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

第二，两边定宽，中间自适应。
正确姿势：
html 代码

仔细看看上面的html，是不是看到不一样的东西了？不一样的地方就是我刚刚接触这个布局不懂的地方。一般来说，我写html，都是从上到下，从左到右的；但是在这个布局中把位于中间部分的div写在了最后的部分。
按照我的理解，按照顺序写div，会造成下面的这种后果：
html 代码

关于div标签，所有的主流浏览器都支持；在默认情况下，一个div会显示一行，俗的来说就是，每个div在默认下都会自动换行。

前端开发笔试题一套|indexof/ .zip web前端开发规范手册|前端开发编码规范