CSS 부동 설정 및 지우기

WBOY
풀어 주다: 2016-09-21 13:56:09
원래의
1028명이 탐색했습니다.

float:设置浮动

  浮动会使元素脱离普通文档流,使元素向左或向右移动,其周围的元素也会重新排布,在布局中非常有用。 

  html:

<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>以下是图片的浮动设置:<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-1.png"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>图片后文字:注意<span style="color: #ff0000;">&lt;</span>p<span style="color: #ff0000;">&gt;</span>是块级元素,元素前后有换行符。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
로그인 후 복사

 

  不设置浮动时浏览器显示如下:

  设置左浮动float:left;后浏览器显示如下:

  设置右浮动float:right;后浏览器显示如下:

 

 

 

clear:清除浮动

  当有的元素不需要浮动时,但该元素周围有浮动的元素时,可是设置clear属性

  clear:left;消除左浮动  clear:right;消除右浮动  clear:both;消除两边浮动

  html:

 

<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>第一组图片:<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-1.png"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-2.png"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>第二组图片:<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-3.png"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-4.png"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-5.png"</span><span style="color: #0000ff;">></span>
로그인 후 복사

  CSS:

<span style="color: #800000;">img
</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">left</span>;
}
로그인 후 복사

  浏览器显示如下:

  这样显得非常不美观,这时可以设置clear:both;

  CSS:

<span style="color: #800000;">img
</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">left</span>;
}
p
{
    clear:both;    
}
로그인 후 복사

  浏览器显示如下:

 

  这样显得更加美观好看,也由此可以看出浮动在布局中起到的作用。

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