Возникли проблемы с пониманием проблемы с плавающей точкой в простом макете пользовательского интерфейса

ProgramBox

Возникли проблемы с пониманием проблемы с плавающей точкой в простом макете пользовательского интерфейса

Post author:admin
Запись опубликована:14 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Я пытаюсь создать макет css с использованием свойств float влево и float вправо. Ниже приведен правильный макет

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

    </head>
    <body>
        <header> header</header>
        <div class="clearfix wrapper">

            <div class="left">
                Left content
            </div>

            <div class="right">
                right content
            </div>
              <div class="center">
                responsive width Main content
            </div>
        </div>
        <footer> footer</footer>
    </body>
</html>

Вот соответствующий css:

 :root {
    box-sizing: border-box;
}

*,
::before,
::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}


.center{
  background:lightblue;
}

.left{
  background:gold;
}
.right{
  background:yellow;
}
footer , header{
  background:CornflowerBlue;
}
.wrapper{
  overflow:hidden;
}
.center,.left,.right{
  text-align:center;
  
}
.left,.right{
  width:100px;
}


.left{
  float:left;
}
.right{
  float:right;
}

После того, как я изменил структуру HTML, переместив div с центральным именем класса между div:слева и div: справа.

         <div class="clearfix wrapper">

            <div class="left">
                Left content
            </div>
              <div class="center">
                responsive width Main content
            </div>
            <div class="right">
                right content
            </div>

        </div>

Я получил следующую неправильную компоновку:

Может ли кто-нибудь объяснить мне, почему у меня возникла вышеуказанная проблема? Меня больше интересует понимание причины, вызывающей такую проблему. Спасибо!

https://jsfiddle.net/Boyanliuu/hf2temwd/13/

1. .центр { ширина: calc(100% — 200 пикселей); поплавок: слева; }

2. пожалуйста, отредактируйте свой вопрос и соедините оба макета вместе, это позволит нам легко понять, в чем проблема.

3. Извините за путаницу, я только что обновил js fiddle, который включает в себя оба макета

Ответ №1:

Когда я впервые попытался понять, как float это работает, мне пришлось проверить элементы в Google Chrome, чтобы, наконец, понять, что float удаляет элемент из обычного потока страницы.

Чтобы продемонстрировать здесь сценарий 1, в котором у вас есть .left , .center , .rigth — все они есть float: none; , т. е. этих элементов нет float . То, что вы видите, — это НОРМАЛЬНЫЙ ПОТОК.

 <div class="left" style="float: none;">Left</div>
<div class="center">responsive width Main content</div>
<div class="right" style="float: none;">right</div>

Теперь в сценарии 2 вы задаете float свойству оба .left .right элемента и. Как вы можете видеть, установив float: left для .left элемента значение, этот элемент был удален из ОБЫЧНОГО ПОТОКА СТРАНИЦЫ, поэтому .center элемент занял свое место и переместился вверх, и если вы посмотрите на этот .center элемент, вы увидите, что он по-прежнему имеет ту же ширину, он выглядит только короче, потому что его левая часть скрыта за .left элементом.

В то же время .right элемент, который был float: right также удален из НОРМАЛЬНОГО ПОТОКА, но он не может сдвинуться вверх, потому что есть .center элемент, который имеет полную ширину и не имеет float . По этой причине .right элемент переместился только на правую сторону контейнера.

 <div class="left" style="float: left;">Left</div>
<div class="center">responsive width Main content</div>
<div class="right" style="float: right;">right</div>

решение

Чтобы устранить проблему в описанном выше сценарии 2, необходимо освободить некоторое пространство для .right элемента, поскольку .center элемент имеет полную ширину и не удален из ОБЫЧНОГО ПОТОКА. Подводя итог, вы можете сделать .center элемент короче, а также удалить его из нормального потока float: left .

 <div class="left" style="float: left;">Left</div>
<div class="center" style="width: calc(100% - 200px); float: left;">responsive width Main content</div>
<div class="right" style="float: right;">right</div>

Как вы можете видеть сейчас .left , элемент перемещается влево, .center элемент перемещается вверх и влево относительно НОРМАЛЬНОГО ПОТОКА из сценария 1, и, наконец .right , элемент перемещается вверх и вправо относительно НОРМАЛЬНОГО ПОТОКА из сценария 1.

Ответ №2:

Попробуй:

 .center { width: calc(100% - 200px); float: left; }

1. Спасибо! Это действительно решает проблему, вы случайно не понимаете, в чем причина проблемы?

2. Уверен, что ваш центральный div пытался охватить всю ширину. Поэтому я уменьшил ширину боковых панелей до 100% ширины.

Метки: Возникли проблемы с пониманием проблемы с плавающей точкой в простом макете пользовательского интерфейса