- This topic is empty.
-
AuthorPosts
-
January 25, 2013 at 4:11 pm #42254fuqlibsMember
**Method 1**
Nicole Sullivan, the pioneer of object-oriented css, uses this:
overflow: hidden; *overflow: visible; zoom: 1;
**Method 2**
Inuit.css uses a mix-in that generates before and after pseudo elements
.cf{
zoom:1;&:before,
&:after{
content:” “;
display:table;
}&:after{
clear:both;
}
}Twitter Bootstrap uses the same thing (except it adds a line-height for opera)
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: “”;
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}**Which do you prefer?**
The second method seems more bloated and I am not sure if it would work in Internet Explore 7 due to the display: table property. The first method is more concise but that doesn’t mean its better.
January 25, 2013 at 7:56 pm #122351rosspenmanParticipantI usually use this one:
::after {
clear: both;
display: block;
content: “”;
}In the event that I have already used up my `::after` pseudo-element, or I need to support ancient browsers, I would use `overflow: hidden;` or `overflow: auto;` depending on the situation.
January 30, 2013 at 11:57 am #122849fuqlibsMemberI guess my follow up question is: Is there a place you can recommend with global statistics on browser usage? This company is not running any type of analytic program and I would like to keep the size of the file down.
January 30, 2013 at 1:00 pm #122857magnus_vbMemberI have this in my stylesheet:
.group:after {
content: “”;
display: table;
clear: both;
visibility: hidden;
}Then I just add the class “group” the the element to have it clear (don’t use Compass).
Just my 2 cents.
MagnusJanuary 30, 2013 at 2:40 pm #122865fuqlibsMemberThank you for all your help everyone. It is much appreciated.
January 30, 2013 at 2:52 pm #122867wolfcry911Participant@Eric, ??
January 30, 2013 at 5:51 pm #122883wolfcry911Participantyou don’t need to give it a dimension for overflow: hidden to work
February 6, 2013 at 7:13 am #123554pratikbhatt2009MemberMake css as below:
.clear{clear:both;}
After completion of any floating div, call clear div…
February 6, 2013 at 7:22 am #123555darrylmMemberI use the same technique as pratikbhatt2009, apart from semantics of having empty divs is there anything wrong with this?
Always curious to know best practices
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.