With Instructables you can share what you make with the world, and tap into an ever-growing community of creative experts.Intro: The very basics of a div-based websiteThis instructable will show you the very basics of how to build a website with divs. Because tables used for layout are evil! :pTo understand this instructable, you'll ...
Step 1: Create the basic filesFirst create your html file. We'll add the very basics to it. The css file will be empty for now.html file now contains:&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 ...
Step 2: Edit the body tag for basic colors, fonts, ...We'll leave the html file as it is, and edit only the css file.Add the following code to your css file:body { background: #444444; font-family: verdana, arial, sans- ...
Step 3: Adding a container with header and contentWe'll now add the container. This is simply a centered div that will contain our entire website.In this container, we' a content div and ...
Step 4: Make two divs in the content div for navigation and actual contentWe'll now add two more divs in the content div. One for navigation and one for the actual content.In between the content- you'll add the new code:&div id=&content& ...
Step 5: Add some extra divs for structure in navigationWe'll now add some extra divs to both the &nav& div to create some kind of structure in our webpage.Change the following bit of code:&div id=&nav&& &div class=&navblock&& ...
Step 6: Add some extra divs for structure in main contentWe'll now do the same for the maincontent div.The code now looks like this:&div id=&maincontent&& &div class=&contentblock&& &p&Lorem ipsum dolor sit amet, ...&/p& &/div&&/div&Again, we'll add a piece ...
Step 7: Make the site a little less uglyN colors.Now that we have the main div structure, we can change the colors to something a little less chaotic/ugly/...Just play around with the colors ...Step 3: Adding a container with header and content
We'll now add the container. This is simply a centered div that will contain our entire website.In this container, we' a content div and a header div.Our html file will now look like this:&html&
&title&test&/title&
&link rel="stylesheet" href="style.css"&
&div id="container"&
&div id="content" class="clearfix"&
&div id="header"&
&/body&&/html&We'll add the following code to our css file:div#container {
width: 800
background: #FFFFFF;
padding: 0}div#content {
width: 800
padding-top: 100
background:}div#header {
width: 800
height: 100
background:
top: 0}.clearfix:after {content:"."; display: height:0; clear: visibility:}.clearfix {display:inline-}/* Hide from IE Mac \*/.clearfix {display:}div#container means that we have a div tag with id "container". We'll add some colors and a "margin: 0" to make sure our container is centered in the page.We have to give the content a padding-top and the header an absolute value with a "top: 0px" to make sure the header is positioned above the other content.Don't mind the ugly colors. It's just to make it easier to read the colors and to see the different divs.We'll need this weird clearfix code to make sure our navigation and content divs (added in the next step) don't fall out of the surrounding div.About This Instructable 6Bio:
I'm Ellen, 24, living in Belgium and ever since I was little, I have enjoyed making greeting cards. If you have any questions ...
More by ErwtjE:Add instructable to:1、Reset.css&样式重置
Reset.css的定义：
The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to built upon. With CSS Reset loaded, write explicit CSS your project needs.
基本的CSS重置消除了由浏览器提供的HTML元素不一致的情况。这将创建一个可靠地建立在单位的基础。使用CSS重置加载，按项目需要书写明确的CSS。
2、Grid.css&栅格
栅格设计是设计者所应具备的一项基本能力。对比例，留白以及结构的理解把握，在为任何发行平台构建栅格时都起着至关重要的作用，无论是web，印刷，还是拟真3D环境中。
【栅格布局的页面】
（栅格原型）
【栅格计算公式】
【Grid命名标准】
Grid按照(40xN)-10公式的栅格布局，#doc的宽度为950px，#doc-w的宽度为100%，N=24 使用1280的分辨率来校准栅格
命名：grid-*中'r'和'l'分别代表最窄栏（即190px宽的栏）所处的位置，c代表（custom），将宽度放出自定义设置，其中的'r'和'l'代表边栏的位置在左或右。
【双飞翼布局】
1 &div class="doc"& 2
//三栏布局
&div class="grid-3 clearfix"& 4
&div class="g-main"& 5
&div class="g-wrap"&主要内容&/div& 6 &
&/div& 7 &
&div class="g-aside"&&/div& 8 &
&div class="g-side"&&/div& 9
//两栏布局11
&div class="grid-2 clearfix"&12
&div class="g-main"&13
&div class="g-wrap"&主要内容&/div&14
&div class="g-aside"&&/div&16
//两栏布局18
&div class="grid-m0s8"&19
&div class="col-main"&20
&div class="main-wrap"&主要内容&/div&
&div class="col-sub"&&/div&23
&/div&24 &/div&25
&【双飞翼布局CSS】
1 .doc{width:<span style="color: #px;margin:0 auto} 2 .grid-3,.grid-2{margin-bottom:10px;} 3 .g-main{width:<span style="color: #%;background:#c0c0c0;margin-right:-100%;float:left} 4 .g-wrap{margin-left:<span style="color: #px;margin-right:<span style="color: #px;background:#DCDCDC;height:<span style="color: #px;} 5 .g-aside{float:left;width:<span style="color: #px;height:<span style="color: #px;background:#DCDCDC} 6 .g-side{float:right;width:<span style="color: #px;height:<span style="color: #px;background:#DCDCDC} 7 .grid-2 .g-wrap{margin-right:0px} 8 .grid-m0s8{margin-bottom:10px} 9 .grid-m0s8 .col-main{width:<span style="color: #%;float:left;height:<span style="color: #px;background:#ccc}10 .grid-m0s8 .col-sub{width:<span style="color: #px;margin-left:-310px;float:right;height:<span style="color: #px;background:#dcdcdc}11 .grid-m0s8 .main-wrap{margin-right:<span style="color: #px;background:#dcdcdc;height:<span style="color: #px}12 .clearfix{display:inline-block}13 .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{display:inline-block}/* Hides from IE-mac \*/* html .clearfix {height:1%}.clearfix {display:block}/* End hide from IE-mac */
&【最终浏览效果】
【事例下载】
阅读(...) 评论()html - What does the clearfix class do in css? - Stack Overflow
to customize your list.
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
J it only takes a minute:
This question already has an answer here:
I've seen div tags use a clearfix class when it's child divs use the float property. The clearfix class looks like this:
.clearfix:after {
content: ".";
height: 0;
visibility:
.clearfix {
display: inline-
.clearfix {
I found that if I don't use clearfix when I use the bottom-border property, the border would show above the child divs. Can someone explain what the clearfix class does? Also, why are there two display properties? That seems very strange to me. I am especially curious about what the content:'.' means.
1,88221629
1,50941840
marked as duplicate by &#9830;
This question has been asked before and already has an answer. If those answers do not fully address your question, please .
How floats work
When floating elements exist on the page, non-floating elements wrap around the floating elements, similar to how text goes around a picture in a newspaper. From a document perspective (the original purpose of HTML), this is how floats work.
float vs display:inline
Before the invention of display:inline-block, websites use float to set elements beside each other. float is preferred over display:inline since with the latter, you can't set the element's dimensions (width and height) as well as vertical paddings (top and bottom) - which floated elements can do since they're treated as block elements.
Float problems
The main problem is that we're using float against its intended purpose.
Another is that while float allows side-by-side block-level elements, floats do not impart shape to its container. It's like position:absolute, where the element is "taken out of the layout". For instance, when an empty container contains a floating 100px x 100px &div&, the &div& will not impart 100px in height to the container.
Unlike position:absolute, it affects the content that surrounds it. Content after the floated element will "wrap" around the element. It starts by rendering beside it and then below it, like how newspaper text would flow around an image.
Clearfix to the rescue
What clearfix does is to force content after the floats or the container containing the floats to render below it. There are a lot of versions for clear-fix, but it got its name from the version that's commonly being used - the one that uses the CSS property clear.
, depending on the browser and use case. One only needs to know how to use the clear property in CSS and how floats render in each browser in order to achieve a perfect cross-browser clear-fix.
What you have
Your provided style is a form of clearfix with backwards compatibility.
about this clearfix. It turns out, it's an OLD clearfix - still catering the old browsers. There is a newer, cleaner version of it in the article also. Here's the breakdown:
The first clearfix you have appends an invisible pseudo-element, which is styled clear:both, between the target element and the next element. This forces the pseudo-element to render below the target, and the next element below the pseudo-element.
The second one appends the style display:inline-block which is not supported by earlier browsers. inline-block is like inline but gives you some properties that block elements, like width, height as well as vertical padding. This was targeted for IE-MAC.
This was the reapplication of display:block due to IE-MAC rule above. This rule was "hidden" from IE-MAC.
All in all, these 3 rules keep the .clearfix working cross-browser, with old browsers in mind.
68.2k14112152
When an element, such as a div is floated, its parent container no longer considers its height, i.e.
&div id="main"&
&div id="child" style="float:height:40"& Hi&/div&
The parent container will not be be 40 pixels tall by default. This causes a lot of weird little quirks if you're using these containers to structure layout.
So the clearfix class that various frameworks use fixes this problem by making the parent container "acknowledge" the contained elements.
Day to day, I normally just use frameworks such as 960gs, Twitter Bootstrap for laying out and not bothering with the exact mechanics.
Can read more here
3,55012231
clearfix i same as Overflow:hidden both clear the floated child parent. But clearfix is not cut the element which overflow to it's parent.
but it's work till IE8 & above.
There is not need to define "." in content & .clearfix. Just write like this:
.clr:after {
content: "";
&div class="parent clr"&&/div&
Read these links for more
63.4k13101133
Not the answer you&#39;re looking for?
Browse other questions tagged
rev .24885
Stack Overflow works best with JavaScript enabled