Почему родительский div не учитывает размеры дочерних элементов?

Question

Гоар

css , html

Почему родительский div не учитывает размеры дочерних элементов?

Привет всем! <br/> У меня есть вопрос, который может показаться не совсем умным, но я действительно не могу понять, почему div-элементы ведут себя именно так. <br/> Я привожу следующий код: <br/> <pre><code class="html">&lt;div class="form"&gt;
            &lt;div class="MAIN_CONTENTS"&gt;
                &lt;div class="main_content"&gt;

                &lt;/div&gt;
    
                &lt;div class="left_bar"&gt;
                    &lt;div class="lb_f_action"&gt;
                        &lt;button class="lb_button"&gt;кнопка&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class="lb_add_banner"&gt;
                        &lt;h1 class="lb_add_text"&gt;текст&lt;/h1&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="table_new_user"&gt;&lt;/div&gt;
        &lt;/div&gt;</code></pre> <br/> <br/> Проблема в том, что блок <b>table_new_user</b> оказывается внутри блока <b>MAIN_CONTENTS</b>, хотя, на мой взгляд, этого не должно происходить. Можете помочь разобраться с этой ситуацией? <br/> <br/> Также прикладываю CSS для всех упомянутых блоков: <br/> <pre><code class="css">.form {
    height: 2000px;
    width: 1150px;
    margin: auto;
    top: 0;
    margin-top: 20px;
}
.MAIN_CONTENTS {
    height: auto;
    width: 100%;
    display: block;
    background-color: pink;
}
.main_content {
    height: 500px;
    width: calc(80% - 10px);
    float: left;
    background-color: blue;
    padding: 10px;
}
.left_bar {
    height: 500px;
    width: calc(20% - 10px);
    float: right;
    border-radius: 5px;
    margin-top: 15px;
}
.table_new_users {
    height: 500px;
    width: 100%;
    background-color: red;
    margin-top: 20px;
}</code></pre>

14 сентября 2024 г. 1:53

Ответы на вопрос 1

Похожие вопросы

Answer 1

Ваша проблема связана с использованием `float` в CSS. Когда вы используете `float`, элементы, которые «плавают», выходят из нормального потока документа, что может приводить к тому, что родительские элементы не воспринимают их как свои дочерние элементы. В вашем случае, это объясняет, почему блок `.table_new_users` оказывается внутри блока `.MAIN_CONTENTS`, а не после него.

Вот несколько способов, как можно решить эту проблему:

### 1. Использование clearfix

Одним из самых распространенных решений для этой проблемы является использование clearfix для родительского элемента, чтобы он учитывал размеры своих «плавающих» дочерних элементов. Например, добавьте это CSS-правило к вашему классу `.MAIN_CONTENTS`:

```css
.MAIN_CONTENTS::after {
    content: "";
    clear: both;
    display: table;
}
```

### 2. Использование Flexbox

Другой хороший подход — заменить `float` на `flexbox`. Это более современный способ организации макета и устранит проблемы с обтеканием. Измените CSS для `.MAIN_CONTENTS`:

```css
.MAIN_CONTENTS {
    display: flex;
    background-color: pink;
}
.main_content {
    width: 80%;
    padding: 10px;
    background-color: blue;
}
.left_bar {
    width: 20%;
    border-radius: 5px;
    margin-top: 15px;
}
```

### 3. Использование `overflow`

Вы также можете установить `overflow: hidden` или `overflow: auto` на `.MAIN_CONTENTS`. Это заставит родительский элемент обрабатывать размеры дочерних элементов, которые плавают:

```css
.MAIN_CONTENTS {
    overflow: hidden; /* или overflow: auto; */
    background-color: pink;
}
```

### Применение выбора

Наиболее предпочтительный способ — это использование Flexbox, так как он более эластичный и позволяет проще управлять макетом. Однако использование clearfix или `overflow` также решает вашу проблему.

Попробуйте один из этих подходов, и ваша разметка должна заработать так, как вы ожидаете!