Почему границы моего поля не окружают плавает внутри них без этого исправления CSS? (А как работает исправление?)

Я учу себя CSS и HTML, и я наткнулся на кое-что, что кажется ошибкой - это сложно понять, как я понимаю HTML и CSS. Я уже нашел исправление для этой ошибки, но я надеялся, что кто-нибудь может мне рассказать, почему исправление работает, и есть ли какие-то советы, как легче справиться с несоответствиями CSS. Ниже я подробно описал проблему и ее решение.

Проблема: и я столкнулся с чем-то похожим на ошибку - это сложно понять, как я понимаю HTML и CSS. Я уже нашел исправление для этой ошибки, но я надеялся, что кто-нибудь может мне рассказать, почему исправление работает, и есть ли какие-то советы, как легче справиться с несоответствиями CSS. Ниже я подробно описал проблему и ее решение.

Проблема: и я столкнулся с чем-то похожим на ошибку - это сложно понять, как я понимаю HTML и CSS. Я уже нашел исправление для этой ошибки, но я надеялся, что кто-нибудь может мне рассказать, почему исправление работает, и есть ли какие-то советы, как легче справиться с несоответствиями CSS. Ниже я подробно описал проблему и ее решение.

Проблема: У меня есть несколько элементов, которые я хочу разместить в нескольких полях на странице. Я изменил CSS, чтобы привлечь внимание к конкретным проблемным областям: красные и зеленые прямоугольники должны быть зажаты между черной и желтой линиями.

Красные и зеленые прямоугольники перемещаются справа и слева от страницы. Их вместилище не расширяется, чтобы окружить их, и черная и желтая линии касаются друг друга. После применения волшебного CSS перед моим собственным CSS, две строки окружают красный / зеленый прямоугольники, как и ожидалось

Вот мои файлы: template.html

    
    
     


    

        

            
Name

            

                
Home Address
            

            

                
Phone Number:5555 
            
        
        This text should be under everything else.
    

template.css:

header#contact
{
    display: block;
    font-size: 1em;
    border-bottom: 5px #ff0 dashed;
}

header#contact
#name
{
    display:block;
    text-align: right;
    font-size: 2em;
    border-bottom: 3px #000 solid;
}

header#contact
#address
{
    float:left;
    background: #f00;
}

header#contact
#contact-details
{
    float:right;
    background: #0f0;
}

И исправление ниже помещено в "resettemp.css":

/* our Global CSS file */article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }/* our ie CSS file */article { zoom:1; }aside { zoom:1; }div { zoom:1; }footer { zoom:1; }form { zoom:1; }header { zoom:1; }nav { zoom:1; }section { zoom:1; }ul { zoom:1; }

источники: http://www.sycha.com/css-clearfix-floated- element-automatic-fill-parent-container

, а затем приведенный выше CSS: http://www.marcwatts.com.au/blog/best-clearfix-ever/

Как мне понять, как это Исправление CSS работает?
Как мне научиться основам синтаксиса CSS помимо понимания этих особенностей? Кажется, я, вероятно, неправильно использую числа с плавающей запятой для достижения целей форматирования - Какой более приемлемый способ разместить два блока текста на противоположных сторонах контейнера под другим подобным блочным элементом?

Браузер: google chrome 10.0.648.205