StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
16568504
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
6
CommunityOwnedDate
CreationDate
2013-05-15T14:59:26.187
FavoriteCount
0
LastActivityDate
2018-03-30T03:36:38.873
LastEditDate
2018-03-30T03:36:38.873
LastEditorUserId
8644621
OwnerUserId
1542290
ParentId
16568272
PostTypeId
2
Score
527
ViewCount
0
LastEditorDisplayName
text
Body
<p>The floated elements do not add to the height of the container element, and hence if you don't clear them, container height won't increase...</p> <p>I'll show you visually:</p> <p><img src="https://i.stack.imgur.com/jSlAi.jpg" alt="enter image description here"></p> <p><img src="https://i.stack.imgur.com/N3rMW.jpg" alt="enter image description here"></p> <p><img src="https://i.stack.imgur.com/7wq0g.jpg" alt="enter image description here"></p> <p>More Explanation:</p> <pre><code><div> <div style="float: left;"></div> <div style="width: 15px;"></div>  <div style="clear: both;"></div>  <div></div> </div> </code></pre> <p>You can also add <code>overflow: hidden;</code> on container elements, but I would suggest you use <code>clear: both;</code> instead.</p> <p>Also if you might like to self-clear an element you can use</p> <pre><code>.self_clear:after { content: ""; clear: both; display: table; } </code></pre> <hr> <h1>How Does CSS Float Work?</h1> <h2>What is float exactly and what does it do?</h2> <ul> <li><p><p>The <code>float</code> property is misunderstood by most beginners. Well, what exactly does <code>float</code> do? Initially, the <code>float</code> property was introduced to flow text around images, which are floated <code>left</code> or <code>right</code>. <a href="https://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#comment26828942_12871734">Here's another explanation</a> by @Madara Uchicha. </p><p>So, is it wrong to use the <code>float</code> property for placing boxes side by side? The answer is <strong>no</strong>; there is no problem if you use the <code>float</code> property in order to set boxes side by side.</p></li> <li><p><p>Floating an <code>inline</code> or <code>block</code> level element will make the element behave like an <code>inline-block</code> element.</p><a href="http://jsfiddle.net/W3GJm/" rel="noreferrer"><strong>Demo</strong></a></p></li> <li><p>If you float an element <code>left</code> or <code>right</code>, the <code>width</code> of the element will be limited to the content it holds, unless <code>width</code> is defined explicitly ...</p></li> <li><p><p>You cannot <code>float</code> an element <code>center</code>. This is the biggest issue I've always seen with beginners, using <s><code>float: center;</code></s>, which is not a valid value for the <code>float</code> property. <code>float</code> is generally used to <code>float</code>/move content to the very <em>left</em> or to the very <em>right</em>. There are only <em>four</em> valid values for <code>float</code> property i.e <code>left</code>, <code>right</code>, <code>none</code> (default) and <code>inherit</code>.</p></li> <li><p><p>Parent element collapses, when it contains floated child elements, in order to prevent this, we use <code>clear: both;</code> property, to clear the floated elements on both the sides, which will prevent the collapsing of the parent element. For more information, you can refer my another answer <a href="https://stackoverflow.com/a/12871734/1542290">here</a>.</p></li> <li><p><strong>(Important)</strong> Think of it where we have a stack of various elements. When we use <code>float: left;</code> or <code>float: right;</code> the element moves above the stack by one. Hence the elements in the normal document flow will hide behind the floated elements because it is on stack level above the normal floated elements. <strong>(Please don't relate this to <code>z-index</code> as that is completely different.)</strong></p></li> </ul> <hr> <p>Taking a case as an example to explain how CSS floats work, assuming we need a simple 2 column layout with a header, footer, and 2 columns, so here is what the blueprint looks like...</p> <p><img src="https://i.stack.imgur.com/F8Vg2.jpg" alt="enter image description here"></p> <p>In the above example, we will be floating only the red boxes, either you can <code>float</code> both to the <code>left</code>, or you can <code>float</code> on to <code>left</code>, and another to <code>right</code> as well, depends on the layout, if it's 3 columns, you may <code>float</code> 2 columns to <code>left</code> where another one to the <code>right</code> so depends, though in this example, we have a simplified 2 column layout so will <code>float</code> one to <code>left</code> and the other to the <code>right</code>.</p> <p>Markup and styles for creating the layout explained further down...</p> <pre><code><div class="main_wrap"> <header>Header</header> <div class="wrapper clear"> <div class="floated_left"> This<br /> is<br /> just<br /> a<br /> left<br /> floated<br /> column<br /> </div> <div class="floated_right"> This<br /> is<br /> just<br /> a<br /> right<br /> floated<br /> column<br /> </div> </div> <footer>Footer</footer> </div> * { -moz-box-sizing: border-box; /* Just for demo purpose */ -webkkit-box-sizing: border-box; /* Just for demo purpose */ box-sizing: border-box; /* Just for demo purpose */ margin: 0; padding: 0; } .main_wrap { margin: 20px; border: 3px solid black; width: 520px; } header, footer { height: 50px; border: 3px solid silver; text-align: center; line-height: 50px; } .wrapper { border: 3px solid green; } .floated_left { float: left; width: 200px; border: 3px solid red; } .floated_right { float: right; width: 300px; border: 3px solid red; } .clear:after { clear: both; content: ""; display: table; } </code></pre> <p>Let's go step by step with the layout and see how float works.. </p> <p>First of all, we use the main wrapper element, you can just assume that it's your viewport, then we use <code>header</code> and assign a <code>height</code> of <code>50px</code> so nothing fancy there. It's just a normal non floated block level element which will take up <code>100%</code> horizontal space unless it's floated or we assign <code>inline-block</code> to it.</p> <p>The first valid value for <code>float</code> is <code>left</code> so in our example, we use <code>float: left;</code> for <code>.floated_left</code>, so we intend to float a block to the <code>left</code> of our container element.</p> <p><a href="http://jsfiddle.net/Lmk9s/" rel="noreferrer">Column floated to the left</a></p> <p>And yes, if you see, the parent element, which is <code>.wrapper</code> is collapsed, the one you see with a green border didn't expand, but it should right? Will come back to that in a while, for now, we have got a column floated to <code>left</code>.</p> <p>Coming to the second column, lets it <code>float</code> this one to the <code>right</code></p> <p><a href="http://jsfiddle.net/Lmk9s/1/" rel="noreferrer">Another column floated to the right</a></p> <p>Here, we have a <code>300px</code> wide column which we <code>float</code> to the <code>right</code>, which will sit beside the first column as it's floated to the <code>left</code>, and since it's floated to the <code>left</code>, it created empty gutter to the <code>right</code>, and since there was ample of space on the <code>right</code>, our <code>right</code> floated element sat perfectly beside the <code>left</code> one.</p> <p>Still, the parent element is collapsed, well, let's fix that now. There are many ways to prevent the parent element from getting collapsed.</p> <ul> <li>Add an empty block level element and use <code>clear: both;</code> before the parent element ends, which holds floated elements, now this one is a cheap solution to <code>clear</code> your floating elements which will do the job for you but, I would recommend not to use this.</li> </ul> <p>Add, <code><div style="clear: both;"></div></code> before the <code>.wrapper</code> <code>div</code> ends, like</p> <pre><code><div class="wrapper clear">  <div style="clear: both;"></div> </div> </code></pre> <p><a href="http://jsfiddle.net/Lmk9s/2/" rel="noreferrer"><strong>Demo</strong></a></p> <p>Well, that fixes very well, no collapsed parent anymore, but it adds unnecessary markup to the DOM, so some suggest, to use <code>overflow: hidden;</code> on the parent element holding floated child elements which work as intended.</p> <p>Use <code>overflow: hidden;</code> on <code>.wrapper</code></p> <pre><code>.wrapper { border: 3px solid green; overflow: hidden; } </code></pre> <p><a href="http://jsfiddle.net/Lmk9s/3/" rel="noreferrer"><strong>Demo</strong></a></p> <p>That saves us an element every time we need to <code>clear</code> <code>float</code> but as I tested various cases with this, it failed in one particular one, which uses <code>box-shadow</code> on the child elements.</p> <p><a href="http://jsfiddle.net/Lmk9s/4/" rel="noreferrer"><strong>Demo</strong></a> (Can't see the shadow on all 4 sides, <code>overflow: hidden;</code> causes this issue)</p> <p>So what now? Save an element, no <code>overflow: hidden;</code> so go for a clear fix hack, use the below snippet in your CSS, and just as you use <code>overflow: hidden;</code> for the parent element, call the <code>class</code> below on the parent element to self-clear.</p> <pre><code>.clear:after { clear: both; content: ""; display: table; } <div class="wrapper clear">  </div> </code></pre> <p><a href="http://jsfiddle.net/Lmk9s/5/" rel="noreferrer"><strong>Demo</strong></a></p> <p>Here, shadow works as intended, also, it self-clears the parent element which prevents to collapse.</p> <p>And lastly, we use footer after we <code>clear</code> the floated elements.</p> <p><a href="http://jsfiddle.net/Lmk9s/6/" rel="noreferrer"><strong>Demo</strong></a></p> <hr> <p>When is <code>float: none;</code> used anyways, as it is the default, so any use to declare <code>float: none;</code>?</p> <p>Well, it depends, if you are going for a responsive design, you will use this value a lot of times, when you want your floated elements to render one below another at a certain resolution. For that <code>float: none;</code> property plays an important role there.</p> <hr> <p>Few real-world examples of how <code>float</code> is useful.</p> <ul> <li>The first example we already saw is to create one or more than one column layouts.</li> <li>Using <code>img</code> floated inside <code>p</code> which will enable our content to flow around.</li> </ul> <p><a href="http://jsfiddle.net/xZPX7/" rel="noreferrer"><strong>Demo</strong></a> (Without floating <code>img</code>)</p> <p><a href="http://jsfiddle.net/xZPX7/1/" rel="noreferrer"><strong>Demo 2</strong></a> (<code>img</code> floated to the <code>left</code>)</p> <ul> <li>Using <code>float</code> for creating horizontal menu - <a href="http://jsfiddle.net/xZPX7/2/" rel="noreferrer"><strong>Demo</strong></a></li> </ul> <hr> <h3>Float second element as well, or use `margin`</h3> <p>Last but not the least, I want to explain this particular case where you <code>float</code> only single element to the <code>left</code> but you do not <code>float</code> the other, so what happens?</p> <p>Suppose if we remove <code>float: right;</code> from our <code>.floated_right</code> <code>class</code>, the <code>div</code> will be rendered from extreme <code>left</code> as it isn't floated.</p> <p><a href="http://jsfiddle.net/Lmk9s/7/" rel="noreferrer"><strong>Demo</strong></a></p> <p>So in this case, either you can <a href="http://jsfiddle.net/Lmk9s/8/" rel="noreferrer"><code>float</code> the to the <code>left</code> as well</a> </p> <p>OR </p> <p>You can <a href="http://jsfiddle.net/Lmk9s/9/" rel="noreferrer">use <code>margin-left</code> which will be equal to the size of the left floated column i.e <code>200px</code> wide</a>.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POWhy doesn't the height of a container element increase if it contains floated elements?
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USMr. Alien
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POWhy doesn't the height of a container element increase if it contains floated elements?
  singulars
  PostTypePostTypeId
  PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.