예제에서는 참조용으로 부동 HTML을 지우는 6가지 방법을 소개합니다.-HTML 튜토리얼-php.cn

예제에서는 참조용으로 부동 HTML을 지우는 6가지 방법을 소개합니다.

伊谢尔伦

풀어 주다： 2017-07-20 09:58:30

원래의

1521명이 탐색했습니다.

표시할 때 발생하는 상황:

1. 블록 요소를 한 줄로 표시합니다.
2. 인라인에서 너비와 높이를 지원하도록 합니다.
4. 설정하면 너비는 콘텐츠 Open
5에 의해 결정됩니다. 블록 태그는 IE6 및 7에서 지원됩니다. 래핑할 때 inline-block 속성이 구문 분석되므로(간격이 있음) 해결 방법은 float:left/를 사용하는 것입니다. 맞습니다
float 사용 시 발생하는 상황:
1. 블록 요소를 한 줄로 표시합니다.
2. 인라인 요소가 너비와 높이를 지원하도록 합니다.
3 너비와 높이가 설정되지 않은 경우 콘텐츠에서 너비를 지원합니다. . 줄 바꿈은 구문 분석되지 않습니다(따라서 인라인 요소를 사용할 때 간격을 지우는 방법은 부동 소수점 사용 가능)
5. 요소가 부동되면 문서 흐름에서 벗어나 경계에 닿을 때까지 지정된 방향으로 이동합니다. 상위 요소 또는 다른 부동 요소가 중지됩니다(문서 흐름은 문서에서 표시 가능한 개체가 정렬될 때 차지하는 공간입니다). 위치)

부동 요소를 지우는 방법:

1. 이 경우 상위 여백: 0 자동;)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动(不居中了)
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
</p>
</body>
</html>

로그인 후 복사

2. 디스플레이 추가: inline-을 상위 블록에 추가합니다. (방법 1과 동일하며 중앙에 위치하지 않습니다. IE6 및 7만 중앙에 위치합니다.)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
</p>
</body>
</html>

로그인 후 복사

3. 플로팅 요소 height:0px;font-size:0;clear:both;} 아래에

.clear{를 추가하세요. IE6에서는 블록 요소의 최소 높이가 있습니다. 즉, 높이가 19px 미만인 경우 기본값은 19px입니다. 해결 방법은 다음과 같습니다. 플로팅 요소 아래에 all">

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
.clear{ height:0px;font-size:0;clear:both;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<p class="clear"></p>
    .clear{ height:0px;font-size:0;clear:both;}
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
        <p class="clear"></p>
</p>
</body>
</html>

로그인 후 복사

. 5. 플로팅 요소의 상위 요소에 {zoom:1;}

:after{content:""를 추가합니다. ; display:block;clear:both;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<p class="clear"></p>
    .clear{ height:0px;font-size:0;clear:both;}
    4.在浮动元素下加<br clear="all"/>
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
    <br clear="all"/>
</p>
</body>
</html>

로그인 후 복사

6. 플로팅 요소의 상위 요소에 Overflow:auto;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
.clear{zoom:1;}
.clear:after{content:""; display:block;clear:both;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<p class="clear"></p>
    .clear{ height:0px;font-size:0;clear:both;}
    4.在浮动元素下加<br clear="all"/>
    5. 给浮动元素的父级加{zoom:1;}
    :after{content:""; display:block;clear:both;}
    **在IE6，7下浮动元素的父级有宽度就不用清浮动
    haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高
  display: inline-block
  height: (任何值除了auto)
  float: (left 或 right)
  width: (任何值除了auto)
  zoom: (除 normal 外任意值) 
*/
</style>
</head>
<body>
<p class="box clear">
    <p class="p"></p>
</p>
</body>
</html>

로그인 후 복사

를 추가합니다.

위 내용은 예제에서는 참조용으로 부동 HTML을 지우는 6가지 방법을 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!