Genies Hour (7)

CSS Layout - float and clear

Know

CSS Float Properties

The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on which side.
                                                          What I have learned?
  • The float property is used for positioning and layout on web pages.
    The float property can have one of the following values:
    • left - The element floats to the left of its container
    • right- The element floats to the right of its container
    • none - The element does not float (will be displayed just where it occurs in the text). This is default
    • inherit - The element inherits the float value of its parent
    • The clear property specifies what elements can float beside the cleared element and on which side.
    • The clear property can have one of the following values:
      • none - Allows floating elements on both sides. This is default
      • left - No floating elements allowed on the left side
      • right- No floating elements allowed on the right side
      • both - No floating elements allowed on either the left or the right side
      • inherit - The element inherits the clear value of its parent
      The most common way to use the clear property is after you have used a float property on an element.

                What problem do I foresee happening?

It is common to forget the clear property which should be added at the end of each div. Otherwise, my web pages are running wrong. Also, we have to add a height for the element.

How can I solve than now?
check every time to see if the website show anything
USE F12 TO CHECK ELEMENT

What is happening that you did not expect?
float element need to be careful with the order, if I need to float right, I need to entry the element in an right to left order.Otherwise, it will appear as what it opposite.

What is the best thing that happened,why?
I do not need to use display:flex or inline-block element to arrange my tags.
Do I like Genuies hour?
Yes!! I have do a website by using html and css.

Comments

Post a Comment

Popular posts from this blog

Genies Hour (10) CSS - Multiple Backgrounds Know CSS  Multiple Backgrounds  Properties background-size background-origin background-clip                                                             What I have learned? Property Description background A shorthand property for setting all the background properties in one declaration background-clip Specifies the painting area of the background background-image Specifies one or more background images for an element background-origin Specifies where the background image(s) is/are positioned background-size Specifies the size of the background image(s)                  What problem do I foresee happening? It is still quiet hard for me to remember the mixed form of background. background:color url()...
Read more
Genies Hour (2) HTML- Iframe ,block Know The <iframe> creates an inline frame, which embeds an independent HTML document into the current document. <div>A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). What I have learned? Block level elements in HTML: < address > < article > < aside > < blockquote > < canvas > < dd > < div > < dl > < dt > < fieldset > < figcaption > < figure > < footer > < form > < h1 > - < h6 > < header > < hr > < li > < main > < nav > < noscript > < ol > < output > < p > < pre > < section > < table > < tfoot > < ul > < video >
Read more