CSS Float Examples

description : CSS Float Examples
author : 오션
email : shlim@repia.com
lastupdate : 2021-03-16

Source of the article

CSS Layout - Float Examples

Grid of Boxes / Equal Width Boxes

float속성을 사용하면 콘텐츠 박스들을 쉽게 나란히 배치할 수 있습니다.

Example

    <style>
        * {
            box-sizing: border-box;
        }
 
        .box {
            float: left;
            width: 33.33%;  /* 3개의 박스, 4개 박스는 25%, 2개 박스는 50% */
            padding: 50px;
        }
 
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
 
<body>
 
    <h2>Grid of Boxes</h2>
    <p>Float boxes side by side:</p>
 
    <div class="clearfix">
        <div class="box" style="background-color:#bbb">
            <p>Some text inside the box.</p>
        </div>
        <div class="box" style="background-color:#ccc">
            <p>Some text inside the box.</p>
        </div>
        <div class="box" style="background-color:#ddd">
            <p>Some text inside the box.</p>
        </div>
    </div>
 
    <p>
        Note that w also us the clearfix hack to take care of the layout flow, 
        and that add the box-sizing property to make sure that the box doesn't break due to extra padding. 
        Try to remove this code to see the effect.
    </p>
 
</body>

What is box-sizing?

3개의 플로팅 박스를 나란히 쉽게 만들 수 있습니다.
하지만 각 박스의 너비를 늘리는 것(예, 패딩 또는 보더)을 추가할 경우, 박스 배치는 어긋납니다.
box-sizing 속성을 사용하면 박스의 전체 너비(및 높이)에 패딩과 보더를 포함하여
패딩이 상자 내부에 유지되고 깨지지 않도록 할 수 있습니다.

''box-sizing'' 속성은 해당 박스의 총 너비 (그리고 높이)에 패딩과 보더를 포함하게 하여, 박스 내부에 패딩이 위치하게 하여 박스 배치가 어긋나지 않습니다.

Images Side By Side

박스의 그리드는 이미지를 나란히 보여주는 것에도 사용할 수 있습니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Images Side By Side</title>
    <style>
        * {
            box-sizing: border-box;
        }
 
        .img-container {
            width: 33.33%;
            padding: 5px;
            float: left;
        }
 
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
            /* p를 이미지 하단에 배치 */
        }
    </style>
</head>
 
<body>
 
    <h2>Images Side by Side</h2>
    <p>Float images side by side</p>
 
    <div class="clearfix">
        <div class="img-container">
            <img src="img_5terre.jpg" alt="Italy" style="width:100%">
        </div>
        <div class="img-container">
            <img src="img_forest.jpg" alt="Forest" style="width:100%">
        </div>
        <div class="img-container">
            <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
        </div>
    </div>
 
    <p>
        Note that we also use the clearfix hack to take care of the layout flow, and that we add the box-sizing property to make sure that the image container doesn't break due to extra padding. Try
        to remove this code to see the effect.
    </p>
 
</body>
 
</html>

Equal Height Boxes

이전의 예제에서, 동일한 너비로 박스들을 나란히 배치하는 방법을 확인하였습니다. 그러나, 동일한 높이로 플로팅 박스들을 만드는 것은 쉽지 않습니다.
하지만, quick fix는 고정 높이를 설정하는 것을 아래 예제에서 살펴보겠습니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Equal Height Boxes</title>
    <style>
        * {
            box-sizing: border-box;
        }
 
        .box {
            float: left;
            width: 50%;
            padding: 50px;
            height: 300px;
        }
 
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
 
<body>
 
    <h2>Equal Height Boxes</h2>
    <p>Floating boxes with equal heights</p>
 
    <div class="clearfix">
        <div class="box" style="background-color:#bbb">
            <h2>Box01</h2>
            <p>Some content, some content, some content</p>
        </div>
        <div class="box" style="background-color:#ccc">
            <h2>Box02</h2>
            <p>Some content, some content, some content</p>
            <p>Some content, some content, some content</p>
            <p>Some content, some content, some content</p>
        </div>
    </div>
 
    <P>
        This example is not very flexible. It is ok to use CSS height if you can guarantee that the boxes will always have the same amount of content in them, but that's not always the case. If you
        try the example above on a mobile phone (or resize the browser window), you will see that the second box's content will be displayed outside of the box.
    </P>
    <p>
        Go back to the tutorial and find another solution, if this is not what you want.
    </p>
</body>
 
</html>

하지만, 이렇게 하는 것은 매우 유연하지 않습니다. 박스들 내부에 항상 동일한 양의 콘텐츠가 있다는 것을 보장할 수 있는 경우에는 괜찮습니다.
하지만 많은 경우 콘텐츠가 동일하지 않습니다. 상기 예제를 휴대폰에서 시도하면, 두 번째 박스의 콘텐츠가 박스 외부에 표시되는 것을 확인할 수 있습니다.
자동으로 가장 긴 박스만큼 길게 박스를 늘릴 수 있는 CSS3 Flexbox가 이런 경우에 유용합니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexible Boxes</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: nowrap;
            background-color: dodgerblue;
        }
 
        .flex-container .box {
            background-color: #f1f1f1;
            width: 50%;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
 
    <div class="flex-container">
        <div class="box">
            Box 01 - This is some text to make sure that the content gets really tall. This is some text to make sur that the content gets really tall.
        </div>
        <div class="box">
            Box 02 - My height will follow Box 01.
        </div>
    </div>
 
    <p>Try to resize the browser window to see the flexible layout.</p>
    <p>
        <strong>Note:</strong>Flexbox is not supported in Internet Explorer 10 or earlier versions.
    </p>
 
</body>
 
</html>

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation menu with float property</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
 
        li {
            float: left;
        }
 
        li a {
            display: inline-block;
            color: yellow;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
 
        li a:hover {
            background-color: red;
        }
 
        .active {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <ul>
        <li><a href="#home" class="active">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
 
</html>

Web Layout Example

float속성을 사용하여 웹 페이지 전체 레이아웃 작업을 하는 것도 일반적입니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web page Layout using float property</title>
    <style>
        * {
            box-sizing: border-box;
        }
 
        .header,
        .footer {
            background-color: grey;
            color: white;
            padding: 15px;
        }
 
        .column {
            padding: 15px;
            float: left;
        }
 
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
 
        .menu {
            width: 25%;
        }
 
        .content {
            width: 75%;
        }
 
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
 
        .menu li {
            padding: 8px;
            margin-bottom: 8px;
            background-color: #33b5e5;
            color: #ffffff;
        }
 
        .menu li:hover {
            background-color: #0099cc;
        }
    </style>
</head>
 
<body>
 
    <div class="header">
        <h1>Chania</h1>
    </div>
 
    <div class="clearfix">
        <div class="column menu">
            <ul>
                <li>The Flight</li>
                <li>The City</li>
                <li>The Island</li>
                <li>The Food</li>
            </ul>
        </div>
 
        <div class="column content">
            <h1>The City</h1>
            <p>
                Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
            </p>
            <p>
                You will lern more about web layout an responsive web pages in a later chapter.
            </p>
        </div>
 
    </div>
    <div class="footer">
        <p>Footer Text</p>
    </div>
</body>
 
</html>

All CSS Float Properties

Property	Description
box-sizing	요소의 너비와 높이가 계산되는 방법을 정의합니다. 패딩과 보더 포함 여부
clear	어떤 요소가 지워진 요소 옆에 그리고 어느 방향으로 플로트 되는지를 지정
float	요소가 플로트 되는 방법을 지정
overflow	콘텐츠가 요소의 박스에서 넘칠 경우 발생하는 작업을 지정
overflow-x	콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 좌측/우측 가장자리에서 수행할 작업을 지정
overflow-y	콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 상단/하단 가장자리에서 수행할 작업을 지정

오션,, CSS, float, examples

목차