지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

CSS의 float 중요 속성 학습 경험

WBOY
풀어 주다： 2016-08-18 08:57:56
원래의
1235명이 탐색했습니다.







중요한 CSS 속성인 float를 살펴보겠습니다.


다음 콘텐츠는 다음과 같은 하위 섹션으로 구분됩니다.


1: float 속성

2: float 속성의 특징

2.1: 플로트 텍스트 감싸기 효과

2.2: float의 아버지 요소가 크게 붕괴되었습니다.

3: 부유물 제거 방법

3.1: html 메소드

3.2: CSS 의사 요소 방법

4: 디스페이스 플로트

5: 블록 플로트 요소

6: 부동 유동 레이아웃

6.1: 한쪽 고정

6.2: DOM 및 디스플레이 위치가 다른 일방적 고정

6.3: 디스플레이와 동일한 위치에 DOM의 일방적 고정

6.4: 스마트 레이아웃


1: 부동 속성


Float는 이름 그대로 떠다닌다는 뜻입니다. 하지만 CSS에서는 float로 이해됩니다. float에는 네 가지 속성이 있습니다. 즉 

<span style="color: #008080;">1</span> <span style="color: #0000ff;">float</span><span style="color: #000000;">:none;
</span><span style="color: #008080;">2</span> <span style="color: #0000ff;">float</span><span style="color: #000000;">:left;
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;">float</span><span style="color: #000000;">:right;
</span><span style="color: #008080;">4</span> <span style="color: #0000ff;">float</span>:inherit;
로그인 후 복사

가장 일반적으로 사용되는 두 가지 속성 값은 왼쪽 부동과 오른쪽 부동입니다. 다음 공유에서는 왼쪽 플로팅만 예로 사용하겠습니다. 그 외 플로팅 속성값의 원리는 왼쪽 플로팅의 원리와 동일합니다.


2: float 속성의 특징


2.1: float의 텍스트 감싸기 효과

floating의 원래 의도는 텍스트 감싸기 효과입니다.

다음 코드와 데모를 살펴보세요. 

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span> <span style="color: #000000;">Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
</span><span style="color: #008080;">5</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
로그인 후 복사
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
<span style="color: #008080;"> 5</span> }
<span style="color: #008080;"> 6</span> <span style="color: #800000;">.container .content </span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 150px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 150px</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 5px</span>;
<span style="color: #008080;">12</span> }
로그인 후 복사

content 요소는 왼쪽 부동으로 설정되어 div 요소가 문서 흐름에서 분리되고 텍스트가 그 주위에 표시됩니다.


　2.2: float의 아버지 요소가 크게 붕괴되었습니다


div 요소를 예로 들어보겠습니다. div 요소의 높이는 콘텐츠에 따라 자동으로 확장됩니다. 즉, 내용만큼 높이도 높다는 뜻이다. 그러나 내부 요소에 float 속성이 설정되면 상위 요소의 높이가 축소됩니다. 코드와 예제는 다음과 같습니다. 

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #000000;">Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
</span><span style="color: #008080;">4</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
로그인 후 복사


아래와 같이 접힌 후 CSS와 데모가 나옵니다. 

<span style="color: #008080;">1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
<span style="color: #008080;">4</span> }
<span style="color: #008080;">5</span> <span style="color: #800000;">.container p </span>{
<span style="color: #008080;">6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;">7</span> }
로그인 후 복사

하위 요소가 부동으로 설정되기 전후에 발생한 변경 사항을 확인할 수 있습니다.

3: 부유물 제거 방법

그럼 문제는 내부 요소가 플로팅되는 경우 상위 요소의 높이 붕괴를 방지하는 방법입니다.


부모 요소에 높이를 직접 설정하면 충분하지 않을까?라고 생각하는 학생들도 있을 것입니다. 실제로는 불가능합니다. 왜냐하면 상위 요소의 높이가 고정되어 있으면 나중에 콘텐츠를 추가하려면 CSS 코드를 수정해야 하는데, 이는 매우 번거로운 작업입니다.
부모 요소의 높이 붕괴 문제를 해결하는 방법에는 두 가지가 있습니다.
　3.1: 상위 요소의 하단에 빈 div를 추가한 다음, clear:both 속성을 ​​추가합니다.

코드는 다음과 같습니다. 

<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #000000;">            Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
</span><span style="color: #008080;">4</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clearfix"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
로그인 후 복사
로그인 후 복사






<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container p </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> }
<span style="color: #008080;"> 8</span> <span style="color: #800000;">.container .clearfix </span>{
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  overflow</span>:<span style="color: #0000ff;"> hidden</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  *zoom</span>:<span style="color: #0000ff;"> 1</span>;
<span style="color: #008080;">11</span> }
로그인 후 복사





 　3.2: 상위 요소는 이후에 의사 클래스를 설정합니다. 




<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #000000;">            Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
</span><span style="color: #008080;">4</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
로그인 후 복사






<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">  *zoom</span>:<span style="color: #0000ff;"> 1</span>;
<span style="color: #008080;"> 5</span> }
<span style="color: #008080;"> 6</span> <span style="color: #800000;">.container p </span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 8</span> }
<span style="color: #008080;"> 9</span> <span style="color: #800000;">.container:after </span>{
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  content</span>:<span style="color: #0000ff;"> ""</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> table</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  clear</span>:<span style="color: #0000ff;"> both</span>;
<span style="color: #008080;">13</span> }
로그인 후 복사




 



   4：float元素去空格化


是什么意思呢？在平时的编码中，为了要符合HTML编码规范，都会为html标签添加缩进，达到美观的效果。可是缩进时就会产生空格，也就是 。当给元素设置左浮动时，元素本身左浮动，剩余的空格会被挤到最后，也就是上文所说的文字环绕效果。但是，要记住一点， 和回车敲下的空格的效果略有不同。 



   5：float元素块状化


在为内联元素设置浮动属性之后，display属性由inline变成block。并且可以为内联元素设置宽高。使用float加width属性可以实现一些简单的固定宽度的布局效果。
 
   6：float流体布局 
 


 


  　　6.1：单侧固定，右侧自适应的布局。




<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>左浮动+固定宽度<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>右边自适应宽度+margin-left<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
로그인 후 복사






<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    max-width</span>:<span style="color: #0000ff;">90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> 
<span style="color: #008080;"> 6</span> <span style="color: #800000;">.left</span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">    float</span>:<span style="color: #0000ff;">left</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;">center</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;">12</span> }
<span style="color: #008080;">13</span> 
<span style="color: #008080;">14</span> <span style="color: #800000;">.right</span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">    margin-left</span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">    padding-left</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;">19</span> }
로그인 후 복사




 
　　6.2：DOM与显示位置不同的单侧固定




<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>右浮动+固定宽度<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>左边自适应宽度+margin-right<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
로그인 후 복사






<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> right</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">10</span> }
<span style="color: #008080;">11</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">  margin-right</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">15</span> <span style="color: #ff0000;">  padding-left</span>:<span style="color: #0000ff;"> 10px</span>;
<span style="color: #008080;">16</span> }
로그인 후 복사




 


 也就是说，html元素与显示在页面上的元素位置不相同。



　　6.3：DOM与显示位置相同的单侧固定 




<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left-content"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>                 <span style="color: #008000;"><!--</span><span style="color: #008000;"> 左浮动+width100% </span><span style="color: #008000;">--></span>
<span style="color: #008080;">4</span>                 <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>margin-right<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>左浮动+固定宽度+margin-left负值<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
로그인 후 복사






<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  margin-left</span>:<span style="color: #0000ff;"> -200px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">12</span> }
<span style="color: #008080;">13</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">15</span> <span style="color: #ff0000;">  margin-right</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">  text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">18</span> }
로그인 후 복사





　　6.4：智能布局



所谓智能布局，就是两栏都不需要设置宽度，宽度随内容自适应。




<span style="color: #008080;"> 1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #000000;">                float+margin-right+自适应宽度
</span><span style="color: #008080;"> 4</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #000000;">                display:table-cell  ---IE8+;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">                display:inline-block   ---IE7+;
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">                自适应宽度
</span><span style="color: #008080;"> 9</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
로그인 후 복사






<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;"> 9</span> }
<span style="color: #008080;">10</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> table-cell</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  *display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">15</span> }
로그인 후 복사
로그인 후 복사






<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;"> 9</span> }
<span style="color: #008080;">10</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> table-cell</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  *display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">15</span> }
로그인 후 복사
로그인 후 복사




 





总结以下：


1：当一个元素设置float属性时，会使元素块状化。


2：float属性的创造初衷就是为了文字环绕效果而生的。


3：float元素会使父元素高度塌陷。


4：float元素会除去换行带来的空格。


5：使用float可以实现两栏自适应的布局。





更多深入了解CSS，可以关注一下张鑫旭大牛





                

            

            

                                

                    관련 라벨：
                    

                        CSS重要属性之float学习心得                    

                

                                
원천：php.cn

                            

            

                                    
                        이전 기사：Iframe 웹페이지 내부의 탐색 창
                    
                                    
                        다음 기사：IE6의 최소 너비 및 최소 높이와 호환됩니다.
                    
                            

            

       
                
본 웹사이트의 성명

                
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

            

           

            

                
저자별 최신 기사

                
            

            

                
최신 이슈

                

                                        

                        

                            function_exists()는 사용자 정의 함수를 결정할 수 없습니다.
                            기능 테스트() {                                                                                ...
                            

                                

                                     에서 2024-04-29 11:01:01
                                

                                

                                    
  0 

                                    
2

                                    
1876

                                

                            

                        

                    

                    

                                        

                        

                            Chrome 모바일 버전을 표시하는 방법
                            안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
                            

                                

                                     에서 2024-04-23 00:22:19
                                

                                

                                    
  0 

                                    
10

                                    
2043

                                

                            

                        

                    

                    

                                        

                        

                            자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다.
                            처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
                            

                                

                                     에서 2024-04-19 15:37:47
                                

                                

                                    
  0 

                                    
1

                                    
1719

                                

                            

                        

                    

                    

                                        

                        

                            상위 창에 출력이 없습니다.
                            document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
                            

                                

                                     에서 2024-04-18 23:52:34
                                

                                

                                    
  0 

                                    
1

                                    
1621

                                

                            

                        

                    

                    

                                        

                        

                            CSS 마인드맵 코스웨어는 어디에 있나요?
                            코스웨어
                            

                                

                                     에서 2024-04-16 10:10:18
                                

                                

                                    
  0 

                                    
0

                                    
1633

                                

                            

                        

                    

                    

                                    

            

            

                

                    
관련 주제

                    더>
                    
                

                

                    
                

            

        

    

    

        

            
인기 추천

            

                
            

        

        
        

            

                
인기 튜토리얼

                더>
                
            

            

                

                    
관련 튜토리얼 

                    
인기 추천

                    
최신 강좌

                

                
                
                
            

            
        


        

            

                
최신 다운로드

                더>
                
            

                        
            

                

                    
웹 효과 

                    
웹사이트 소스 코드

                    
웹사이트 자료

                    
프론트엔드 템플릿