浮动布局

Posted 陈陈chenchen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浮动布局相关的知识，希望对你有一定的参考价值。

摘要自：https://blog.html.it/layoutgala/index.html

In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts that we‘ve thought worth sharing: on each of them you‘ll find also a download link (if you want, you can download the entire collection, 40 HTML pages in a single zip file). Further details can be found below the gallery.

Further details

All layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. Each of the columns could be the longest, and for testing columns length I‘ve used the script filler text on demand.

Each layout could represent a site with five main sections: header, content, navigation, other stuff and footer. The basic markup, common to every layout, is the following:

<div id="container">
  <div id="header">Header</div>
  <div id="wrapper">
    <div id="content">Content</div>
  </div>
  <div id="navigation">Navigation</div>
  <div id="extra">Extra stuff</div>
  <div id="footer">Footer</div>
</div> 

It‘s almost minimal, apart from an extra wrapper around the content. Some might argue that the extra div it‘s unsemantical: all I can say is that in my opinion an extra wrapper in the markup is certainly better than CSS hacking, and to be able to meet the objectives I fixed for the article I needed at least a solid starting point.

Talking about CSS: each of the layouts uses float and in most of the cases negative margins. Once you‘ve understand how they work, they are really simple and powerful. There are two main things to know: first, a negative margin according to the side of float has the effect of shifting even more the floated elements towards the side of float; the second one is that a negative margin on the opposite side of float does not affect the floated element position, but has the only effect to yeld space for eventual flanking element on the side of the negative margin.

The CSS of the examples, which is embedded in both online and download versions, has been kept to the minimum in order to focus on the most important thing, as is the layout. In fact, the CSS has been divided, with an empty line, between two logical parts: the first is for typography and colors, while the second and most important is for the layout itself. No graphics was used in the examples, but if you‘ll feel the need, you may want to apply techniques such as Faux Columns and Sliding Faux Columns. That‘s all for now: enjoy!









以上是关于浮动布局的主要内容，如果未能解决你的问题，请参考以下文章

浮动布局与定位布局

两列布局——只用右浮动

当我尝试在片段中显示或隐藏浮动操作按钮时出错

浮动操作按钮 onClick 上的 viewPagerAdapter 片段 NullPointerException

浮动法布局

如何在单个活动中使用片段中的主要活动浮动操作按钮？