Float

ming0·2022년 4월 13일
2
post-thumbnail

📖Today I Learned

✅ float

  • 둥둥 '띄우다'라는 뜻으로 다양한 객체를 띄워서 정렬하는 속성

원래 그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생했다.

  • 주로 블록 박스 요소를 정렬하는 방법으로 사용

float: left 하기 전

float: left 한 후


하지만, float를 설정하게 되면 가족들이 못 알아보는 문제가 발생한다,,



이유는👇

  • 브라우저는 화면에 요소를 보여주는 세 가지 방법 ( normal flow float position ) 이 있다.
  • 대부분의 요소들, 블록 레벨, 인라인 요소들은 normal flow에 따라 레이아웃이 결정된다.
  • float, position에 속한 요소들은 normal flow에서 벗어나게 되어 인식하지 못한다.

✔ 위의 문제점을 해결하는 방법!

  1. 부모 요소에 overflow 속성을 추가하여 부모요소가 자식요소를 인식하게 만드는 방법
    👉 overflow는 block-formatting-contexts를 생성하여 float 속성이 적용된 요소를 인식하게 만든다.

    ❗자식의 크기가 크거나 그림자같은 효과가 있을 경우 인식하지 못하는 문제 발생
    👉 display, postion 같은 요소 적용하기

  1. 부모 요소의 높이 값을 직접 지정해주는 방법 ( 추천X )
    👉 수정하는 상황에 계속 수정해야 하는 문제 발생

  1. float 사용된 요소의 바로 다음 형제 요소에 clear 속성을 설정하는 방법
    👉 float가 사용된 요소가 정렬된 방향에 따라 clear 속성 left, right, both 세 가지 값 중 적절히 사용

  1. 가상요소인 ::after를 사용하여 막내 형제 요소를 만든다 👉 clear-fix 방법
    👉 가상요소 + clear 를 이용하여 자식요소로 인식하게 하여 자기 왼쪽에 있는 형제의 float를 해결해준다. (부모에게 존재 알린다.)

    가상요소 : css를 html요소로 만들어준다.

0개의 댓글