boy
10
2019-06-12 17:01:44
2
99

css 공부중에 float에서 이해가 안되는게 있는데요.



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css_021_float</title>

<style type="text/css">

/*

float(플로트):

1 플로트는 박스의 위치를 부모요소의 안에서 왼쪽 또는 오른쪽으로 이동시키는 기능이다.

2 플로트가 지정된 박스는 문서의 일반적인 흐름에 영향을 받지 않으면서 이동된 위치에 떠 있다

*/

.wrap {

	/*크기를 명시하지 않으면 가로는 부모의 영향을 세로는 자식의 영향을 받는다.(블록)*/

	background-color: gray;

}



div.wrap div {

	width: 100px;

	height: 100px;

}



.box1 {

	background-color: red;

	float: left;

}



.box2 {

	background-color: green;

	float: left;

}



.box3 {

	background-color: blue;

	float: left;

}



.wrap span {

	float: right;

	text-align: center;

}



.other {

	clear: both; /*float해제*/

}



/*img {

	float: right;

	margin: 20px;

}*/

img{

float: left;

margin: 20px;

}



</style>

</head>

<body>

	<div class="wrap">

		a

		<div class="box1"></div>

		<div class="box2"></div>

		<div class="box3"></div>

		<span>inline</span>

	</div>


동그라미 친 부분에 왜 a가 가려지지 않고 float한 부분 옆으로 출력이 되는지
모르겠어요.

float를 하면 해당 블록이 뜬다고 하는데 그러면 a라는 텍스트는 
블록에 가려져서 안보여야 하는게 아닌가요?




0
0
  • 답변 2

  • 컴포지트
    96
    2019-06-12 17:39:38

    흐음... 뜬다는 의미긴 한데 그렇다고 주위 컨텐츠를 덮어버리는 기능은 아니고, 주위 컨텐츠를 float 속성에 따라 좌측이면 우측으로, 우측이면 좌측으로 밀어버리는 기능을 하는 속성입니다.

    안보이게 덮어버리고 싶으면 position:absolute|fixed; 속성이 있습니다.

    https://developer.mozilla.org/ko/docs/Web/CSS/float

    0
  • boy
    10
    2019-06-12 17:46:30
    감사합니다! 
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.