Can an element with a border create a block formatting context?

According to resources from W3C and MDN, a block formatting context is generated by various factors:

  • The root element or its containing element
  • Elements with floats (where float is not set to none)
  • Absolutely positioned elements (with position set to absolute or fixed)
  • Inline-block elements (display property set to inline-block)
  • Table cells (set with display: table-cell, default for HTML table cells)
  • Table captions (display: table-caption, default for HTML table captions)
  • Elements with overflow other than visible
  • Flex boxes (display set to flex or inline-flex)

However, a confusion arises in the following code snippet:

<div style='background:grey;border:black 1px dotted;width:400px'>
    <div style='margin:20px;background:red;'>the parent create a bfc</div>
</div>
<div style='background:grey;width:400px'>
    <div style='margin:20px;background:red;'>why?</div>
</div>

The first div establishes a BFC, even though the only variance between them is the presence of a border on the first div. This raises the question of why that specific element created a BFC.

htmlcssborder

Answer №1

Neither of the two div components are establishing their own BFC. Your code does not indicate that the first div is creating a BFC - simply having a border is not enough to trigger an element to form its own BFC.

The main function of the border in this scenario is preventing margin collapse. This ensures that the margins of the child element do not merge with those of the parent element, containing them within the parent element's box instead.

Answer №2

I completely agree with @BoltClock

The purpose of the border is to prevent margin collapse. This ensures that the margins of the child element do not combine with those of the parent element and remain within the parent element box.

Here is a solution to address this issue if you wish to implement it. Simply include overflow: hidden; in your second div to avoid margin collapsing.

<div style='background:grey;border:black 1px dotted;width:400px'>
    <div style='margin:20px;background:red;'>the parent creates a bfc</div>
</div>
<div style='background:grey;width:400px; overflow: hidden;'>
    <div style='margin:20px;background:red;'>why?</div>
</div>

Answer №3

I believe there may be some misunderstanding in the information provided on MDN.

Based on the approved response, it seems this interpretation is incorrect. I share this viewpoint as it contradicts the definition outlined in BFC

https://i.sstatic.net/4nMBL.png

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

Steps to retrieve the complete URL of a photo from a form stored in an array

Looking to utilize jQuery for grabbing an image from my computer through a form. - Need the complete URL out of the form into an array It's functioning somewhat in Dreamweaver, but facing issues in explorer browsers and even chrome The ultim ...

javascriptjqueryhtmlphotopicker

What steps can be taken to resolve this issue?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut ...

font-sizecss

Store the injected HTML within a PRE tag as a variable

My question pertains to a DIV HTML element that is responsible for displaying some HTML content from a variable: <div contenteditable="true" ng-bind-html="renderHtml(currentOperation.description)" ng-model='currentOperation.description&a ...

htmlangularjsbindpre

Adding CSS classes through the .addClass method - A guide on utilizing linked CSS files

I came across this code snippet and I have a quick question. $(window).scroll(function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // adjust as needed if(y_scroll_pos > scroll_pos_test) { $( "#cssmenu" ).addCl ...

jquerycss

What is the best way to ensure a canvas fits perfectly inside a div without distorting its aspect ratio?

I am facing a challenge with a canvas element placed inside a flexbox that can be resized. My goal is to have the canvas fill the available space while maintaining its aspect ratio (2/3) and without getting cut off. (I prefer adjusting the CSS dimensions ...

htmlcsshtml5-canvasobject-fit

Stopping jQuery fadeOut from setting the display property to 'hidden'

I am currently working on a project that involves creating a lightbox effect. I am using jQuery's fadeIn and fadeOut functions to display enlarged div elements. However, I have encountered an issue - when I use fadeOut on the enlarged div, the smaller ...

jqueryhtmlcss

Adjustable diagonal line within a container using CSS styling

Seeking assistance with a rectangular div that can have its diagonal length adjusted using JavaScript. I am looking to add a diagonal line to label the diagonal length when it is increased or decreased using the +/- buttons. I require the line to resize a ...

javascripthtmljquerycss

Centering bootstrap columns in a WordPress template

I am facing an issue with aligning columns in a bootstrap section within a Wordpress template that I am working on. The problem is that the columns on the second line of the row are not centered. Currently, the layout displays 4 columns in the top row and ...

htmlcssbootstrap-4

Applying CSS onmousemove does not function properly in conjunction with Bootstrap framework

Currently, I have a code snippet that enables an absolutely positioned box to follow the movement of the mouse cursor: $(document).mousemove( function(e) { $(".wordbox").css({ top: "calc(" + e.pageY + "px - 0.8em)", left: e.pageX }) ...

jquerycsstwitter-bootstrap

What are the possible reasons for the incorrect appearance of jqxMenu?

I am currently developing a custom module for an angular project. My goal is to create a menu using jqxMenu, however, when I use ng serve to run the project, the menu does not display as expected. Below is how I have imported jqxmenucomponent into my compo ...

htmlnode.jsangulartypescriptjqwidget

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to position images in a circular layout around a central

I am struggling to position small planetary images around the main logo in a way that creates a satellite-like effect. Despite my efforts with positioning and margins, I have not been successful in achieving the desired look. Additionally, when I insert th ...

htmlcssparticles.js

What is the best way to ensure that my drop-down menu items match the size of the parent nav bar?

I'm having trouble creating a dropdown menu using only CSS. Specifically, I am struggling to ensure that the dropdown menu is the same size (width and height) as its parent element. Here is a link to a working example: HERE This is the snippet of HT ...

htmlcss

Is it possible to detect when a scrollable div is "in focus" on Firefox?

When using Firefox, a scrollable div can become "focused" and respond to mousewheel and Page Up/Down keys, although technically divs cannot be focused according to the HTML5 specification. This means that even though events are triggered on the div, it is ...

javascriptfirefoxdomhtmlscroll

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

phpcssimage

Coordinating the vertical scrolling of two div elements simultaneously. (scrolling both divs together)

I have a specific setup where I have a text box that is scrollable, and outside of this box are headings that correspond to different sections in the text. I am looking for a way to synchronize the scrolling of the text inside the box with the headings out ...

javascripthtmlcssscrollbootstrap-4

Unable to play GSM extension files on a web browser due to compatibility issues

I've been attempting to play an audio file with a (.gsm) extension using <audio>, object tags, and JavaScript. <script> var myAudio = new Audio(); // creating the audio object myAudio.src = "test.gsm"; // assigning the audio file t ...

javascripthtmlaudio

Extract only a portion of the text

Could use some C# assistance this time around. Received an html file with the following content: <ul class="ui_sug_list"></ul></div></div></div></form> </div></div><div class="cnt_listas"><ol id="l ...

c#.nethtml

Using the jQuery Selector with multiple IDs will yield different results compared to using a single ID selector

Initially, I set up some dropdown menus to determine which one has been selected and then load the elements with no issues. However, when I added a new set of dropdowns, my existing function started applying to this one as well because it was too broad. ...

javascriptjqueryhtmlcss

What techniques are most effective for concealing a div container through css?

I attempted to hide the #div element using CSS: #div{ display: hide; } However, the method did not work as expected. ...

css