> 웹 프론트엔드 > HTML 튜토리얼 > css float 属性解析_html/css_WEB-ITnose

css float 属性解析_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:03:47
원래의
898명이 탐색했습니다.

     float 属性的定义:使元素在哪个方向浮动

             默认值为:none

            注意:浮动元素会生成一个块级框,而不论它本身是何种元素

HTML代码:

<body>     <div class="main">	 <div class="d" id="d1">框1</div>	 <div class="d" id="d2">框2</div> 	 <div class="d" id="d3">框3</div>	 <div class="d" id="d4">框4</div>       </div></body>
로그인 후 복사

1,当兄弟元素全为浮动元素时其父类元素在没有自定义宽高时其高度将为零

css样式:

.main {      border: 1px solid ;   } .d {      border: 1px solid red;      width: 50px;      height: 50px;      float: left;   }
로그인 후 복사

显示效果:

2,浮动元素会在一行之内空间不够多余的浮动元素会跳至下一行

css样式:

 .main {      border: 1px solid ;      width:130px;   } .d {      border: 1px solid red;      width: 50px;      height: 50px;      float: left;   }
로그인 후 복사

显示效果:

3,浮动元素会脱离文本流,其参照父类元素

ccs样式:

  #d1{     float:left;   }
로그인 후 복사

 显示:

 

 

 

 

 

     

            

                     

                     

             

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿