본문 바로가기
Html&CSS/html4&css

0217_5

by .Epona. 2020. 2. 17.

 

 

		.float-none{border: 2px solid green}
        .float-none .none{border:2px dotted red;}/*부모 영역인 ul태그*/
        .float-none .none:after{content: ''; display: block; clear: both}/*부모영역안에 자식 영역이 들어가게됨------잘 모르겠어요 !!!!!!!!!!!!--*/
        .float-none li{border: 2px solid orange;/*자식 영역인 li태그:블록 요소라서 아래로 '기본배치'가 됨*/
            float:left}/*블록 요소를 가로로 배치 시킴*/
        
        .float-none li:first-child+ li{float:none}/*두번째에 float안함(간혹 사용)*/

 

<h3>3. float:none</h3>
        <div class="float-none">
            <ul class="none"><!--li는 블록요소라서 아래로 '기본배치'가 됨-->
                <li>왼쪽으로 배치</li>
                <li>왼쪽으로 배치</li>
                <li>왼쪽으로 배치</li>
                
            </ul>