Неожидаемо работает margin при float

Question

Столкнулся вот с такой проблемой, хотелось бы, чтобы был отступ 30px от верхних элементов, но увы margin с применением float сработал не так, как я ожидал. Что предложите сделать? Вот код:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

header, section, aside, footer {
    background: rgb(72, 165, 49);
    height: 100px;
    border: 3px solid black;
    border-radius: 6px;
    margin-top: 30px;
}

section {
    float: left;
    width: 60%
}

aside {
    float: right;
    width: 30%;
}

.main {
    width: 1200px;
    margin: 0 auto;
}

footer {
    clear: both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <header></header>
        <section></section>
        <aside></aside>
        <footer></footer>
    </div>  
</body>
</html>

Answer 1

Очень частая проблема. Решается через оборачивание двух элементов с float в специальный блок clearfix

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

header, section, aside, footer {
    background: rgb(72, 165, 49);
    height: 100px;
    border: 3px solid black;
    border-radius: 6px;
    margin-top: 30px;
}

section {
    float: left;
    width: 60%
}

aside {
    float: right;
    width: 30%;
}

.main {
    width: 1200px;
    margin: 0 auto;
}
.clearfix::after{
   content:'';
   clear: both;
   display:table;
}
footer {
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <header></header>
        <div class="clearfix">
           <section></section>
           <aside></aside>
        </div>
        
        <footer></footer>
    </div>  
</body>
</html>

БЛОГ НА HUSL

Неожидаемо работает margin при float

Ответы (1 шт):