CSS clearfix how to over come the inability to center an element using it

问题

Ok I am remastering a site for one of my clients and for years I have been doing things a little old fashion as far as CSS goes. Ive read up on some things and found the method referred to as clearfix, and I have been wanting to give it a shot since I read about it.

Now that I am giving it a shot I am finding out my method of centering an element is not working

typically I would center it margin:0 auto; but implementing the clearfix this no longer works. So now I am looking for a means of applying the same logic but keeping clearfix in the equation. I found a couple things that would work on newer browsers but not sure if they would work on older ones and I am trying to keep this as cross browser compliant as possible without hacking things to do things to do other things. Thats one of the many reasons I am remastering the site(s) I want a nice new clean code base for them from the ground up, that is compliant.

for reference this is the method of clearfix I am using http://www.webtoolkit.info/css-clearfix.html

*EDITED TO SHOW CODE*

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[title here]</title>
<style type="text/css" media="all">
*{margin:0;padding:0;}
body{background-color:#3F3965;font-family:Verdana, Geneva, sans-serif;color:#000;}
#content_wrap{margin:0 auto;padding:0;width:800px;background-color:#FFF;}
#content_left{width:180px;float:left;}
#content_right{width:620px;float:left;}
.rounded{
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
  behavior: url(border-radius.htc);
}
.border{border:solid 2px;}
.light{border-color:#999;}
.dark{border-color:#666;}
.clr{clear:both;} /*standard clear*/
/*start clearfix*/
.clearfix:after {content: ".";display: block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix{height:1%;}
/*end clearfix*/
</style>
</head>
<body>

<div id="content_wrap" class="clearfix rounded border dark">
    <div id="content_left">left</div>
    <div id="content_right">right</div>
</div>
</body>
</html>

as previously mentioned the main containing element loses its "centered" position upon applying the clearfix class to it. The whole point of the clearfix from my understanding it to take parent elements that have floating elements within it is to have the element adjust itself to the height of the largest floating element within it. Now where this works like I believe it should the margin:0 auto; on the same element via a class provided otherwise gets ignored

回答1:

One method to solve the miscalculation of container height of elements having floating children is to put overflow:hidden on them. The miscalculation occurs because at the time of calculating the height of container DIV the inside layout is not ready. overflow:hidden on container DIV forces recalculation of the height after all children are rendered.

<div class="container">
    <div class="child">
    Lorem ipsum
    </div>
    <div class="child">
    Lorem ipsum
    </div>
    <div class="child">
    Lorem ipsum
    </div>

.container{
    overflow:hidden;
    }
.child{
    float:left;
    width:20px;
    }

This will cause problem only in palces where you have some elements absolutely or relatively positioned that is actually placed outside container, like some banners and ribbons. Otherwise this is a clean solution.

PPK has one article on it http://www.quirksmode.org/css/clearing.html

回答2:

Ok, Ill answer my own question. Seeing as no one here could provide anything better or in a sense specific to the question.

What I ended up doing is taking another div placing it inside the content_wrap div, and removed the clearfix class from this element. This this new div was given the class of clearfix and wrapped around the rest of the content divs so it would apply the clearfix the way intended.

This allowed for the content_wrap div to center the way I wanted it to.

回答3:

Expanding on chris's answer, you want two wrappers in this scenario.

The outside wrapper should set the width of the container, and apply your margin: 0 auto; styling:

.content_center {
  width: 800px;
  margin: 0 auto;
}

Then, we can apply the clearfix class and styles to your content wrapper, and set it's width to 100% (of its parent):

.content_wrap {
  width: 100%;
}

Here's a fiddle.

来源：https://stackoverflow.com/questions/10571048/css-clearfix-how-to-over-come-the-inability-to-center-an-element-using-it

标签

html

css

clearfix