What are the basics of floating elements and how can it be effectively utilized in CSS3?

Question

What are the basics of floating elements and how can it be effectively utilized in CSS3?

I can't wrap my head around this property. First, let me share what I know about it. I'm focusing on the <p> element with id="amazing" for this discussion.

Let's set a width for it

#amazing{
   width: 200px
}

The outcome is:

Since paragraphs are block elements, other elements won't move up beside them as they have line breaks before and after.

Next, I float it by:

#amazing{
       width: 200px;
       float: right
 }

My understanding so far:

(1) The browser displays elements on the page from top to bottom
(2) When encountering a floated element, the browser positions it all the way to the right and removes it from the flow

Please correct me if I'm wrong at this point...
Moving on,

Using Float Property with CSS Dropdown Menus

Consider this code snippet from the web :
An unordered list with list items like this

<ul id="menu">
    <li>
        <a href="">Home</a>
    </li>
    <li>
        <a href="">About Us</a>

        <ul id="menu-about-us">
            <li>
                <a href="">The Team</a>
            </li>
            <li>
                <a href="">History</a>
            </li>
            <li>
                <a href="">Vision</a>
            </li>
        </ul>
    </li>
    ...

Now, if I do this...

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

ul li {
    display: block;      
    position: relative;
    float: left;
}
li ul {
    display: none;
}

For ul li, why does setting display: block make them act as inline elements? And what purpose does the float property serve here?

ul li {
    display: block;      
    position: relative;
    float: left;
}

I'm quite baffled by this. Can someone clarify how float interacts with block and inline elements?

css css-float

Answer 1

Answer №1

The outcome varies depending on the specific situation and what you aim to accomplish, Shirgill. I have prepared a quick comparison for you on JS Fiddle --> http://jsfiddle.net/Lt7cftyc/

You are correct. When you apply display:inline-block; to a list with the float attribute, it behaves similarly:

ul li {
display:inline-block;
}

will behave similarly to:

ul li {
display:block;
float:left;
}

however, there are some distinctions. For instance, you must always clear floated elements to avoid unexpected behavior:

clear:both;

In the example below, you can observe different scenarios with inline and floated menus. Feel free to experiment and observe how the behavior changes when you add margins or paddings to inline vs. floated elements. It may surprise you.

ul.inline li {
 display:inline-block;
}

ul {
    font-size:14px;
    font-family: Arial;
    border: 1px solid black;
    background: lightblue;
    margin: 20px 0;
}

ul li {
    padding: 0 5px;
}

ul.floated2 {
    height: 20px;    
}

ul.floated li, ul.floated2 li {
    display:block;
    float:left;
}

.clr {
clear:both;
}

<p>This is an example of an inline list</p>
<ul class="inline">
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu3</li>
</ul>
<br />
<p>This is an example of a floated list. Note the lack of background - first difference!</p>
<ul class="floated">
    <li>menu floated 1</li>
    <li>menu floated 2</li>
    <li>menu floated3</li>
</ul>

<br />
<p>This is an example of a floated list with visible background after setting height:20px;. </p>
<ul class="floated2">
    <li>menu floatedSecond Version 1</li>
    <li>menu floated 2</li>
    <li>menu floated3</li>
</ul>

Answer 2

The outcome varies depending on the specific situation and what you aim to accomplish, Shirgill. I have prepared a quick comparison for you on JS Fiddle --> http://jsfiddle.net/Lt7cftyc/

You are correct. When you apply display:inline-block; to a list with the float attribute, it behaves similarly:

ul li {
display:inline-block;
}

will behave similarly to:

ul li {
display:block;
float:left;
}

however, there are some distinctions. For instance, you must always clear floated elements to avoid unexpected behavior:

clear:both;

In the example below, you can observe different scenarios with inline and floated menus. Feel free to experiment and observe how the behavior changes when you add margins or paddings to inline vs. floated elements. It may surprise you.

ul.inline li {
 display:inline-block;
}

ul {
    font-size:14px;
    font-family: Arial;
    border: 1px solid black;
    background: lightblue;
    margin: 20px 0;
}

ul li {
    padding: 0 5px;
}

ul.floated2 {
    height: 20px;    
}

ul.floated li, ul.floated2 li {
    display:block;
    float:left;
}

.clr {
clear:both;
}

<p>This is an example of an inline list</p>
<ul class="inline">
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu3</li>
</ul>
<br />
<p>This is an example of a floated list. Note the lack of background - first difference!</p>
<ul class="floated">
    <li>menu floated 1</li>
    <li>menu floated 2</li>
    <li>menu floated3</li>
</ul>

<br />
<p>This is an example of a floated list with visible background after setting height:20px;. </p>
<ul class="floated2">
    <li>menu floatedSecond Version 1</li>
    <li>menu floated 2</li>
    <li>menu floated3</li>
</ul>

What are the basics of floating elements and how can it be effectively utilized in CSS3?

Answer №1

Similar questions

Image floating next to a table

Having trouble with clicking on an icon link within a list

CSS properties for a div element resembling a button

Troubleshooting navigation bar problems: dealing with overlapping and padding challenges in

CSS Resizing the screen leads to misalignment of the footer layout

Create a moving background gradient with styled-components

Discover the steps to position the bootgrid pagination control above the table

What steps can be taken to stop a list from exceeding the boundaries of its parent <div>?

Leveraging the power of CSS Target to emphasize the parent container

Is there a way to validate td content without considering spaces or new lines?

Issue in Chrome when using CSS clip property on nested div elements

Menu toggle vanishes suddenly

The design became distorted when the fonts were resized in every browser

Attempting to change the primary color in Bootstrap is ineffective following a button click

Difficulty positioning CSS, aligning flex-box grid with floating text

Selenium with Python: A class focused on link text

Activate SwipeBox gallery and launch an external link

Problem with text alignment in Internet Explorer 7

Troubleshooting problems with CSS menus and submenus, along with addressing browser pixel issues specific to Web

Conceal a Div Element on a Website