CSS Block Formatting Contexts

CSS Block Formatting Contexts
Nikhil
Published on 2021-07-09 05:52:08

Using the overflow property with a value different to visible


img{
float:left;
width:100px;
margin:0 10px;
}
.div1{
background:#f1f1f1;
/* does not create block formatting context */
}
.div2{
background:#f1f1f1;
overflow:hidden;
/* creates block formatting context */
}

https://jsfiddle.net/MadalinaTn/qkwwmu6m/2/

Using the overflow property with a value different from visible (its default) will create a new block formatting context. This is technically necessary — if a float intersected with the scrolling element it would forcibly rewrap the content.

This example that shows how a number of paragraphs will interact with a floated image is similar to this example, on css-tricks.com.

2: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow MDN

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website