mdn/css/3_css_layout/04_floats

04_floats

dz / mdn / css / 3_css_layout / 04_floats

Summary

Floats

Node Tree

Nodes

floats
content floats
children margin_float_pushes_text, background, box_float_margin_right

background
content background
children intended_for_image_floating
parents floats

intended_for_image_floating
content originally intended for image floating inside column of text
children repurposed
parents background

repurposed
content started being repurposed for many things
children drop_caps (example)
parents intended_for_image_floating

drop_caps
content drop-caps
parents repurposed

box_float_margin_right
content box can be floated with "float" and "margin-right"
children margin_float_pushes_text, margin_left_reverse
parents floats

margin_left_reverse
content "margin-left" for reverse effect
children margin_float_pushes_text
parents box_float_margin_right

margin_float_pushes_text
content applying a margin to float pushes text away
children cant_add_margin_text_push_float (other way around doesn't work)
parents box_float_margin_right, floats, margin_left_reverse

cant_add_margin_text_push_float
content cant add margin to text to push away float: element taken out of normal flow, boxes of following items run behind float
parents margin_float_pushes_text

clearing_floats
content clearing floats
children clearing_boxes_wrapped_around_float, clear, clear_prop

clear
content clear: stop element following float from moving up
parents clearing_floats

clear_prop
content clear property
children clear_prop_args
parents clearing_floats

clear_prop_args
content clear: left/right/both. clears items floated to left/right/both.
parents clear_prop

clearing_boxes_wrapped_around_float
content clearing boxes wrapped around a float
children block_formatting_context
parents clearing_floats

block_formatting_context
content block formatting context (BFC) using display property
children display_flow_root
parents clearing_boxes_wrapped_around_float

display_flow_root
content display: flow-root
parents block_formatting_context