Could someone please clarify a specific aspect of how floats work?

Could someone simplify this explanation for me?

A float is positioned next to a line box if there is a vertical space that meets these conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.

Keep in mind that floats with zero outer height or negative outer height do not affect the length of line boxes.

What does the first paragraph mean exactly?

Can you explain what "outer height" refers to? Is it related to margins?

Referenced from: CSS spec 2.1 > visual formatting model > section 9.5 Floats

Answer №1

Can you explain the significance of the first paragraph?

The first paragraph provides a clear definition of when text is considered "next" to a float, indicating vertical overlap between them. When text is positioned next to a float, it may be shortened to avoid interference with the float.

What exactly is meant by outer height? Does it include margin?

Outer height refers to the measurement from the top edge of the top margin to the bottom edge of the bottom margin. It's important to note that margins can have negative values, meaning the lower edge of the bottom margin could be above the upper edge of the top margin, resulting in a negative height.

To see practical examples of how adjusting the bottom margin (and consequently the outer height) impacts the width of text lines, refer to the link below or visit http://jsfiddle.net/n0fobpqr/2/.

body { font-size:20px; width: 300px; }
figure { float:left; }
img { padding-right: 10px; }
.one figure { margin:0; }
.two figure { margin:0 0 -60px 0; }
.three figure { margin:0 0 -110px 0; }
<div class="case one">
    <figure>
        <img src="http://placehold.it/100"/>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr/>
<div class="case two">
    <figure>
        <img src="http://placehold.it/100"/>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr/>
<div class="case three">
    <figure>
        <img src="http://placehold.it/100"/>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

Answer №2

When floats collapse, they move to the next line that is visible on the screen. Imagine these "lines" as containers that can stretch all the way from one end of the browser window to the other. Floats themselves do not affect the height of these lines. The overall height includes everything about the float, such as margins and borders.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for implementing a third-party component in my web application?

After some experimentation, I've discovered that it's necessary to include the link to the css files in the header and then mention the link to the js files before the closing tag. However, I encountered difficulties when trying to use a compone ...

Trouble with the display:none attribute in Firefox and Chrome

<tr style="height:5px" id="TRRSHeaderTrialBar" name="TRRSHeaderTrialBar" style='display:none'> <tr id="TREmail" name="TREmail" style="height:1px;" nowrap style='display:none'> Using the code snippet above to hide the bar w ...

A guide on applying bold formatting to a specific section of text in React

I have a collection of phrases structured like so: [ { text: "This is a sentence." boldSubstrings: [ { offset: 5, length: 2 } ] } ] My goal is to display each phrase as a line using the following format: ...

Tips for effectively sizing a logo within a Bootstrap navbar

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link ...

Conflict between the top menu and body on the HTML page is causing issues

Encountered an issue with my HTML code: CSS: .fixedmenu { overflow: hidden; background-color:rgb(153,0,51); position: fixed; /* Ensures the navbar stays in place */ top: 0; /* Positions it at the top of the page */ width: 100%; /* Occ ...

Implementing a consistent CSS structure for various media sizes

Utilizing CSS grid and Sass, I implement varying grid layouts for different screen sizes (phone, tablet, desktop). However, on certain pages, I desire the same layouts at slightly larger or smaller screens than others. Is there a way to achieve this witho ...

Is there a way to eliminate the additional gap found at the bottom of a div element?

I've been encountering some difficulty when trying to insert an image into a div without any padding. The issue I'm facing is that the sizing doesn't seem to be correct; there's unnecessary extra space at the bottom. Despite my efforts ...

What's the name of the auto-triggered dropdown menu feature?

Visit Amazon's official website Description: Within the 'Shop by Department' section- A drop-down menu that remains visible without requiring you to hover over it. However, when the browser is in a non-full-screen mode, the menu disappears ...

Ensuring elements are properly centered within a Bootstrap grid while adjusting the window size

I've been facing a challenge with making my web page resizable. Even though I managed to center the elements using margin properties, whenever I try resizing the browser window, the logo and ship images lose their positions. They end up falling out of ...

Implementing automatic page breaks in Laravel using the mpdf libraryLet me know

I am attempting to automatically add a page break if the data exceeds 10. I am using mpdf in conjunction with Laravel and Vue. Below is my CSS code: <style> div.breakNow { page-break-inside:avoid; page-break-after:always; } </style> This is t ...

Utilizing HTML and CSS to Position Text Adjacent to the Initial and Final Elements in a Vertical List

Exploring a simple number scale ranging from 1 to 10, I experimented with different ways to represent it. Here's my attempt: <div class="rate-container"> <p class="first">Extremely Unlikely</p> <a class=" ...

Performance problems arising from use of Tailwind CSS drop-shadow class

Lately, I've been struggling to pinpoint the root cause of a drastic FPS drop in my application. The issue arises after using the app for some time, leading to a performance plunge down to around 10FPS. After investigating, I discovered that eliminati ...

What steps can I take to display lines in a textarea so that it closely resembles the appearance of a notepad document

Is there a way to display lines in a text-area to give it the appearance of a notepad? I only have one text-area available. See the example notepad below for reference. ...

"Exploring the best locations for storing CSS, JS, and image files in Spring

Having trouble figuring out where to place my public files. I attempted the solution mentioned in this thread on Stack Overflow but it didn't work for me. I've tried putting my public folder in various locations within the WEB-INF directory, but ...

Navigate between pictures using hover in jQuery

I am working on creating a feature where images cycle through individually every 2 seconds, but switch to the right image when its associated link is hovered. So far, I have managed to make the images show up on hover, but I am struggling with getting them ...

Spin: twist beyond 360 degrees or less than 0 degrees

Attempting to rotate an arrow indicating wind direction using the transform: rotate() property. The data for rotation is retrieved from an API fetch, and conventional measurement of wind direction involves indicating where the wind is coming from. Therefo ...

Reducing the amount of text displayed on ion-text to a minimum

HTML: <ion-list *ngFor="let message of messages"> <ion-item lines="none" type="button" button="true"> <ion-grid> <ion-row> <ion-col class="message"> <ion-text> ...

Issue with Expo Google Places Autocomplete: ListView not clickable

I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from ...

Place a pair of divs in the center next to one another

What is the best way to align two divs in the center beside each other with some padding in between that actually works? I attempted using display: inline, but it didn't have the desired effect. .my-container { position: rela ...

Different width, same height - images arranged side by side in a responsive layout

The problem lies in the images: Here is an example of desktop resolution: I need to use default size pictures (800x450px) on the server. This means I have to resize and crop them with CSS to fit the container div's width while keeping the height con ...