Display, overflow, positioning, float

DISPLAY

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.

There are 4 values of the „display“property: inline, block, hidden, none

inline: displays elements, object whatever they are all in one line.

block: displays elements, objects whatever they in a block (square model, like a special box.

inline-block: displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box. Or we can just say when the inline element’s reach the end of the section (can be a div) the next elements which can’t be inserted on that line will go on the next line. This attribute value produces some extra space.

none: removes all elements, objects.

Elements also have a property called visible which have values of: hidden, collapse (elements are self-explanatory and easy to use).

OVERFLOW

Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don’t set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.

There are four values for the overflow property: visible (default), hidden, scroll, and auto. There are also sister properties overflow-y and overflow-x, which enjoy less widespread adoption.

hidden: hides the actual content after the content overlaps the section

scroll: a box forms when the content inside the section gets too big and a scrolled appears

visible: the content inside the section overlaps

https://css-tricks.com/the-css-overflow-property/

POSITIONING

static: the default position of an element, object, the normal position

fixed: primarily used for navigation (scroll up-down) purposes, an element which is fixed positioned stays there no matter how much you scroll your page

absolute: absolute positioning allows you to remove an object from the typical flow of the document and place it at a specific point on the page. When applying this property you must specify the left or top or bottom or right position, without it, it won’t work. Absolute position starts from the upper left corner only if not placed in a container with relative positioning. When something has absolute positioning applied, it neither affects nor is affected by other elements in the normal flow of the page.

relative: relative positioning works similarly to absolute positioning in that you can use top, bottom, left and right to scoot an object to a specific point on the page. The primary difference is the origin or starting point for the element. As we saw above, with absolute positioning, the starting point was at the very top left of the browser window. The origin also known as the starting points depends on the position of the object where it would normally be (normally be means that position: static is applied or no position is applied

FLOAT

When you apply float css style, the object that flows is completely removed from the normal element flow. For instance if you apply float to an element and start to write a paragraph from the top of the document proceeding to the bottom the float element will just float there.

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. The floated elements pushes all the other horizontal elements around the floated element.

It represents kind of isolation which can’t be reached no matter what.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

The elements after the floating element will flow around it.The elements before the floating element will not be affected.

If an image is floated to the right, a following text flows around it, to the left:

You will often see the attribute clear in use. The clear attribute removes the float, so when you want again to position elements, to have the elements in the flow then use clear.

The elements which do not have the clear property will be pushed by the floated element as long as the non-floated elements match the height of the floated elements. After they leave the floated scope they will automatically gain the attribute clear.

Example
Good video of CSS-float ever: Click here