Анализ BFC и IFC в CSS

CSS

предисловие

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

1 Что такое БФК

Как и во всех предыдущих сообщениях в блоге, давайте начнем сWhatС точки зрения начала внедрения, от поверхностного к глубокому пониманию BFC. Так называемый Formatting context (контекст форматирования), это понятие в спецификации W3C CSS2.1.

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

А контексты блочного форматирования (BFC, контексты форматирования на уровне блоков) — это правила рендеринга и отображения элемента на уровне блока. С точки зрения непрофессионала, BFC можно понимать как закрытый большой ящик, и дочерние элементы внутри контейнера не будут влиять на элементы снаружи, и наоборот.

Правила компоновки BFC следующие: 1 внутренние блоки будут располагаться один за другим в вертикальном направлении; 2 BFC представляет собой изолированный независимый контейнер на странице; 3 принадлежаттот самый БФСдваСмежный ящикиз верхнее и нижнее полеПроизойдет перекрытие; 4 При расчете высоты БТЭ плавающий элемент также участвует в расчете 5 Левая сторона каждого элемента соприкасается с левой стороной содержащегося ящика, даже если имеется поплавок; 6 Площадь БФК не будет перекрываться с поплавком;

Итак, как запустить BFC? Функция BFC срабатывает всякий раз, когда элемент удовлетворяет любому из следующих условий:

  • корневой элемент тела;

  • Плавающий элемент: float не является значением атрибута none;

  • Абсолютно позиционированные элементы: позиция (абсолютная, фиксированная)

  • display is: inline-block, table-cells, flex

  • значение переполнения, отличное от видимого (скрытое, автоматическое, прокрутка)

Две характеристики и области применения BFC

Далее представлены общие функции и приложения BFC.В этой части при объяснении причин будут использоваться приведенные выше правила компоновки и условия срабатывания, поэтому вам нужно обратить внимание.

1 Вертикальная граница блочных элементов в двух соседних нормальных потоках схлопнется

    

  1. <head>
    2. 

  2. .p {  
    3. 

  3.   width:200px;  
    4. 

  4.   height:50px;  
    5. 

  5.   margin:50px 0;  
    6. 

  6.   background-color:red;  
    7. 

  7. }  
    8. 

  8. </head>
    9. 

    10. 

  10. <body>
    11. 

  11.    <div class="p"></div>  
    12. 

  12.    <div class="p"></div>  
    13. 

  13. </body>
    14. 

скопировать код

Визуализации:

Согласно статье 3 Правил BFC:

Вертикальное расстояние блока определяется полем, принадлежащим одному и тому же BFC + верхнее и нижнее поля двух соседних блоков будут перекрываться.

В приведенном выше примере схлопывание полей происходит из-за того, что они принадлежат корневому элементу тела, поэтому нам нужно сделать ихНе принадлежат к одному и тому же BFCчтобы избежать схлопывания полей:

    

  1. <div class="p"></div>  
    2. 

    3. 

  3. <div class="wrap">  
    4. 

  4.   <div class="p"></div>  
    5. 

  5. </div>  
    6. 

скопировать код
    

  1. .wrap {  
    2. 

  2.   overflow:hidden;  
    3. 

    4. 

  4. .p {  
    5. 

  5.   width:200px;  
    6. 

  6.   height:50px;  
    7. 

  7.   margin:50px 0;  
    8. 

  8.   background-color:red;  
    9. 

скопировать код

Визуализации:

2 BFC может содержать плавающие элементы (очистить плавающие элементы)

Обычно плавающий элемент выходит за рамки обычного потока документов, поэтому в следующем коде:

    

  1. <div style="border: 1px solid #000;">
    2. 

  2.     <div style="width: 50px; height: 50px; background: #eee;
    3. 

  3.                float: left;">
    4. 

  4.     </div>
    5. 

  5. </div>
    6. 

скопировать код

Внешний div не сможет содержать внутренний плавающий div Эффект показан на следующем рисунке:

Но если мы запустим BFC внешнего контейнера, согласно пункту 4 спецификации BFC:При расчете высоты БФК в расчете также участвует плавающий элемент, то внешний контейнер div может обернуть плавающий элемент, поэтому просто измените код следующим образом:

    

  1. <div style="border: 1px solid #000;overflow: hidden">
    2. 

  2.     <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
    3. 

  3. </div>
    4. 

скопировать код

Можно добиться следующих эффектов:

3 BFC может предотвратить закрытие элементов плавающими элементами

Давайте посмотрим на пример:

    

  1. <div class="aside"></div>  
    2. 

  2. <div class="main"></div>  
    3. 

    4. 

  4. div {  
    5. 

  5.   width:300px;  
    6. 

  6. }  
    7. 

  7. .aside {  
    8. 

  8.   width: 100px;  
    9. 

  9.   height: 150px;  
    10. 

  10.   float: left;  
    11. 

  11.   background: black;  
    12. 

  12. }  
    13. 

  13. .main {  
    14. 

  14.   height:200px;  
    15. 

  15.   background-color:red;  
    16. 

  16. }  
    17. 

скопировать код

Визуализации:Это так из-за вышеизложенного Правило 5:Левая сторона каждого элемента касается левой стороны содержащего его блока, даже если есть поплавок;

Так что если вы хотите изменить эффект и сделать его дополняющим, вы должны использовать правило 6: площадь BFC не будет перекрываться с поплавком, так что<div class="main">Также могут срабатывать свойства BFC, а именно:

                                                
    
                                                    
  1. 
                                                        
    .main {  
    
                                                    
    2. 
                                                    
  2. 
                                                        
      overflow:hidden;  
    
                                                    
    3. 
                                                    
  3. 
                                                        
      height:200px;  
    
                                                    
    4. 
                                                    
  4. 
                                                        
      background-color:red;  
    
                                                    
    5. 
                                                    
  5. 
                                                        
    }  
    
                                                    
    6. 
                                                

                                                скопировать код

Таким образом, его можно использовать для создания адаптивного макета из двух столбцов.

3 Краткое введение в IFC

Правила компоновки IFC:

  1. Ящики выкладываются горизонтально друг за другом, начиная с вершины вмещающего блока.

  2. При размещении этих блоков будет учитываться пространство, занимаемое их внутренними и внешними полями + границы в горизонтальном направлении; в вертикальном направлении эти блоки могут быть выровнены по-разному: допустимы горизонтальные поля, отступы, границы, недействительны по вертикали. ширина и высота не могут быть указаны;

  3. Ширина строчного бокса определяется содержащим его блоком и наличием поплавков; высота строчного бокса определяется высотой строки.

Оригинал: https://segmentfault.com/a/1190000012993668

Категории