Fundamental CSS Rules (Normal flow, BFC, IFC)

When designing with HTML and CSS, sometimes the layout doesn't turn out as expected.

I've had experiences where I had to ask Google a lot of questions.

Recently, while watching Zerocho's developer talk video, I decided to learn about the fundamentals of CSS.

- I want to understand block elements, inline elements, margin, and alignment.

I already know these things from experience, but I need to organize them.

■ When I need to modify CSS, if I just apply things based on experience and implement them as they appear, it can lead to problems in responsive design or make maintenance complex later on.

1. Normal Flow

- There's nothing special to consider. All elements are placed from top to bottom and left to right.

* When pasting HTML tags while writing an article in durumis, they disappear. Do you know how to solve this;;

- Two blocks are created with the p tag, and the span tag is drawn in a single line.

2. BFC (Block Formatting Context)

- It's mainly used when building layouts. (Constructing a block and then an inline within it.)

- It's the way block-level elements are stacked.

- Block-level elements are as follows:

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- Regardless of the length of the content inside the element, it occupies the entire width of the parent element. (One line)

- You can put a block inside a block or include inline elements.

- You can set width, height, margin, and padding.

- Two lines are generated within the div tag.

- When a BFC is created is as follows. You can look it up case by case.

• When the float property is not none
• When the position is absolute or fixed
• When the display is inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• When overflow is not visible, etc.
  
  

3. IFC (Inline Formatting Context)

- It's constructed within a block element. (Not line-based)

- You can't directly set width and height. (It takes up the size of the content.)

- You can only apply horizontal padding and margin.

- Only inline elements can be included within an inline element.

<span>, <a>, , <img>, <input>, etc.

So, when do you use it?

- BFC is used to handle float interactions and margin collapsing.

1. Float Interaction

- If you apply a free-spirited style to a child, the parent can't contain it.

(float, position absolute, fixed, display inline-block, etc...)

- At this time, you use a BFC on the parent element to build the layout.

(Apply display: inline-block, overflow: auto, float: left, etc. to the parent tag.)

2. Margin Collapsing

- In CSS, the top and bottom margins of adjacent tags overlap.

ex) The vertical spacing between the two div tags below is 100px, not 150px.

- In this situation, you add a new BFC element between the two tags.

ps. Do you know how to copy and paste HTML in durumis;;