CSS 플로팅의 원리

无忌哥哥원래의: 2018-06-29 09:14:022808검색

1. 부동 위치 지정과 절대 위치 지정의 유사점:

1 부동 요소도 문서 흐름에서 벗어납니다.

2. 너비와 높이가 지원되며 블록 요소로 변환됩니다.

2. 부동 특성: 가로 방향으로만 수행할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>5.浮动的原理</title>
    <style>
        .box1 {
            width:200px;
            height: 200px;
            background-color: lightskyblue;
            /*设置左浮动*/
            /*下面绿色块看不到了,因为浮动元素脱离了文档流,绿色自动上移占据了原来蓝色块的位置*/
            /*如果想看到绿色块,只要将绿色块宽高调整大一点就可以*/
            /*float:left;*/
        }
        .box2 {
            width:200px;
            /*width:250px;*/
            height: 200px;
            /*height: 250px;*/
            background-color: lightgreen;
            /*
            如果第二个色块也浮动的话:它会紧贴着第一个浮动的元素,这是为什么呢?
            因为第二个色块也脱离了文档流,与第一个是在同一个平面中,这点对排版很重要
            */
            float:left;
        }
        .box3 {
            width:200px;
            height: 200px;
            background-color: lightcoral; /*珊瑚色*/
            /*下面浮动第三个色块*/
            /*float:left;*/
            /*浮动还可以向右进行,它会一直向右侧移动,直到碰到窗口最右侧停止*/
            /*float:right;*/
        }
        .text {
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*将行内元素进行浮动后,将会脱离文档流,从而使其支持宽高设置*/
            /*float:left;*/
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<!-- <span>是行内元素,它的宽高由内部文本决定,不支持用户自定义宽高设置的-->
<!-- <span>php中文网</span> -->
<!-- 总结:浮动使元素脱离了文档流,同时使行内元素也支持了宽高,表现出与块级元素一样的特征 -->
</body>
</html>

위 내용은 CSS 플로팅의 원리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS 고정 위치 지정다음 기사：CSS 고정 위치 지정