How to Not Use <Div Class="Clear"> in Markup

Clearing floats without extra markup

If elements in a container are set to float they will screw up.

Because the parent doesn't know the height of the floated element in it (because it isn't in the flow of the document anymore)

http://jsfiddle.net/CkdY6/

The best you can do is set the parent element to overflow: hidden

http://jsfiddle.net/CkdY6/1/

But as someone recently pointed out to me it will screw up when you want to use CSS3 stuff like a drop shadow.

http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

How can I wrap my markdown in an HTML div?

Markdown

For Markdown, This is by design. From the Inline HTML section of the Markdown reference:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.

But it is explicitly allowed for span-level tags:

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

So, depending on your use-case, you might get away with using a span instead of a div.

CommonMark

If the library you use implements CommonMark, you are lucky. Example 108 and 109 of the spec show that if you keep an empty line in between the HTML block and the markdown code, the contents will be parsed as Markdown:

<div>

*Emphasized* text.

</div>

should work, while the following shouldn't:

<div>
*Emphasized* text.
</div>

And, again according to the same section in the reference, some implementations recognize an additional markdown=1 attribute on the HTML tag to enable parsing of Markdown inside it.

Though it doesn't seem to work in StackOverflow yet:

Testing **Markdown** inside a red-background div.

Deleting a div with a particular class using BeautifulSoup

Sure, you can just select, find, or find_all the divs of interest in the usual way, and then call decompose() on those divs.

For instance, if you want to remove all divs with class sidebar, you could do that with

# replace with `soup.findAll` if you are using BeautifulSoup3
for div in soup.find_all("div", {'class':'sidebar'}): 
    div.decompose()

If you want to remove a div with a specific id, say main-content, you can do that with

soup.find('div', id="main-content").decompose()

How to clearfix without markup?

I have been using the semantic group 'micro clearfix' which I found on CSS Tricks.

.group:after {
  content: "";
  display: table;
  clear: both;
}

The CSS is similar to the above solutions, however the concept is that you can add it to any element which you wish to 'group' together and be followed by a clear. Eg:

<header id="masthead" class="group">
  //content
</header>

The above link also has sub-IE8 rules.

EDIT My apologies, I just answered the title of the question, without properly reading your scenario. I would not use floats in this case. Instead, I like to use display: inline-block like so:

#main_features {
  font-size: 0; /* this resets the default padding created by the inline-block rule below */
  margin: -2%; /* offsets the positive margin below */
}

.feature {
  display: inline-block;
  vertical-align: top;
  width: 46%;
  margin: 2%; /* width + (2x margin) = 50%*/
  font-size: 12px; /* because it is reset to 0 by parent */
}

The font is set to zero on the parent element because some browsers add padding to an inline-block element. The parent element also has a negative margin to offset that of its children. This allows the content to align with the rest of your page.

I have made a basic demo of this here.

What is a clearfix?

If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.

It's worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.

• display: inline-block - Better
• Flexbox - Best (but limited browser support)

Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.

For a detailed browser list see: https://caniuse.com/flexbox.

(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)

---

A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.

The clearfix is a way to combat the zero-height container problem for floated elements

A clearfix is performed as follows:

.clearfix::after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Or, if you don't require IE<8 support, the following is fine too:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Normally you would need to do something as follows:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

With clearfix, you only need the following:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

Read about it in this article - by Chris Coyer @ CSS-Tricks

hr clear vs div clear. Which is better?

According to the HTML5 spec, the hr element represents a paragraph-level thematic break (a scene change in a story, or a transition to another topic within a section of a reference book) while the div element is a generic container for flow content that by itself does not represent anything. So I don't see any justification for choosing one over the other for containing floats.

However, there's something you should keep in mind. Read the following excerpt from Eric Meyer's article Containing Floats:

div.item {border: 1px solid; padding: 5px;}
div.item img {float: left; margin: 5px;}
div.item hr {display: block; clear: left; margin: -0.66em 0;
    visibility: hidden;}

The negative top and bottom margins
have the general effect of closing up
the space that the hr occupies.
However, this effect is not precise,
and not necessarily identical across
browsers. The semi-mysterious nature
of horizontal rules makes it difficult
to predict exactly what will happen.
The effective height of the hr might
be zero, or a small positive amount,
or even a negative height

Therefore, in situations where a
precise clearing effect is needed,
authors can use a div instead of an hr
to create a clearing effect.

If this didn't make sense to you, see this fiddle and notice the space below the floated div (IE8).

That said, there are other ways to contain floats and avoid using structural hacks at the same time:

1. Float the container: may cause layout problems.
2. Use .container { overflow: auto; }: If the content exceeds the boundaries of the container, you will see a scrollbar.
3. Use .container { overflow: hidden; }: If the content exceeds the boundaries of the container, it will be hidden.
4. Clearfix: To be used when 2 and 3 fail.

Semantic HTML and clear: both

There are several ways to clear floats:

1 . Use CSS pseudo :after class

.container:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

Apply the container class to your "widgetRow" div. This approach is probably the most semantic, but it is not supported on all browsers, specifically IE7 and below. browser support for :after

2 . Use overflow:auto or overflow:hidden

.container { overflow:auto; }
.container { overflow:hidden; }

Again, apply the container class to your "widgetRow" div. This approach may be a little more semantic, but it could also come back to bite you especially when viewed on smaller displays. overflow:auto could trigger a horizontal scrollbar while overflow:hidden could hide the element all together. problems using oveflow to clear floats

3 . Use clear:both

.clear { clear:both; }

This is the approach you are using assuming your clear class is like the one above. This is the only approach I know of that is compatible in all browsers and won't give you undesirable side effects. So, depending on what browsers you support, I would probably stick with what you have.

---

Related Topics