Excellent Programming Tricks

Float Behavior | CSS


  1. Float property [1]
    1. Changes the behavior of that element and the block level elements that follow it in normal flow.
    1. Removing normal flow and element moved from left to right instead.
    2. The surrounding content floats around the floated item.
  2. Property values
    1. <left>, <right>, <none>, <inherit>
  3. Block-level elements behavior with float or display property
  4. Float property behaviors with parent
    1. Float element naturally collapses its parent element. The width of a child element crosses the parent width they don't depend on child element float property. But height is collapsed when float is present in a child element.  Complication 
    2. Solution 1
      1. Add <div style="clear:both">.
      2. Just create a new line.
    3. Solution 2
    4. Solution 3
  5. Behavior with image
    1. Suppose your element has inline properties like image. Use float(left/right) with img then text wrap image. Image 3.
    2. Brittle
      1. Bottom margin mismatch: Use padding bottom in parent or use hr with margin bottom. If double margin appears allow inline-block with float element.
      2. Some pixel cross: Add height/width with child element.
      3. Image cross parent div widely : Use overflow hidden.
    Ref[1]: https://developer.mozilla.org/en-US/docs/Learn/CSS/
    CSS3 Essentials 

    No comments:

    Post a Comment


    Authentic аnd Excellent

    Website

    HTML Template

    Wordpress Theme

    Database applications

    OR

    Application services?

    Excellent Programming Tricks (EPT) || Iftekhar-IT || We develops the Web applications and the WordPress templates. || Excellent Programming Tricks (EPT)

    © 2020 Blogger Theme by Iftekhar IT || Excellent Programming Tricks

    Execllent Programming Tricks. Powered by Blogger.