반응형
1. float 요소
이미지의 좌, 우측에 텍스트를 둘러싸는 레이아웃을 위해 도입된 레이아웃으로
이미지가 아닌 다른 요소에 적용해 엡 사이트의 전체 레이아웃을 만드는데 까지 발전 했다.
css를 처음 배우던 4년 전만해도 float로 모든 화면을 처리했던 것 같은데 float을 통해 요즘은 화면구성을 잘 하지 않는다는 말을 들었다.
4년전에는 신 기술이었는데 4년이라는 짧은 시간동안 이렇게 빠르게 발전한건지,,, 아니면 그냥 그 때 내가 몰랐던건지
배우던 당시에는 table을 통해서 화면 구성을 할 수 있고 table 을 이용한 화면 구성이 오래된 방식, float최신방식이라 배웠었는데...
flexbox를 처음 접해서 얼떨떨하다
Float 속성
- float: left; 요소를 왼쪽으로 정렬시킨다
- float: right; 요소를 오른쪽으로 정렬시킨다
- float: none; 기본 값
2. float 으로 화면 구성하기
.box{
width: 100px;
height: 100px;
margin: 10px;
background-color: burlywood;
}
.float-left{
float: left;
}
.float-right{
float: right;
}css
<body>
<div>
<div class="box float-left">
box1
</div>
<div class="box float-left">
box2
</div>
<div class="box float-right">
box3
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At repellendus impedit similique. Eos, illum aliquam veniam reiciendis quos iure dignissimos nobis quisquam voluptate quod accusamus nemo animi. Deserunt, nobis pariatur. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde deserunt tenetur eos velit maxime cumque quas quos? Facilis nobis quisquam minus, quasi quidem alias esse perferendis reiciendis delectus! Aliquam, architecto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi nesciunt quo doloremque aperiam fugiat. Distinctio eveniet illum modi expedita atque nemo libero doloremque qui! Rerum esse magnam est asperiores molestiae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea sunt, veniam sapiente amet fugit quidem dolore obcaecati recusandae totam tenetur aliquam nulla quisquam esse, tempora suscipit ipsa quam cum delectus.
</div>html
box1, 2에 float left / box 3에 float right 속성을 주면 다음과 같이 box가 이동하는 것을 볼 수 있다.
3. float 속성 지우기
float 속성을 주지 않는 non-float-box를 만들어 박스들의 하단에 위치시키면 아무 클래스의 영향을 받지 않은 non-float-box는 화면의 상단으로 이동한다(float 박스들은 화면에 띄워져 있는 상태)
그럼 이렇게 화면이 깨지는데 이걸 방지하기 위해 float 속성을 제거해줘야한다.
.clearfix>::after{
content:"";
display:block;
clear:both;
}
.non-float{
clear: both;
}
non float box가 div 로 만들어져 block 속성을 가지고 있기 때문에 글까지도 아래로 이동하는 모습을 볼 수 있다
float을 통해 정렬을 한 후 정렬이 필요하지 않은 요소를 사용하는 시점에서 clear: both를 사용한다고 생각하면 될 것 같다
반응형