Both control whether the page can be embedded in an iframe. X-Frame-Options (2013) is simpler but limited to DENY, SAMEORIGIN, or (deprecated) ALLOW-FROM one origin. CSP frame-ancestors (2016) allows multiple origins, wildcards, and integrates with the rest of your CSP. Modern deployments ship both — CSP for browsers that support it, X-Frame-Options as a fallback.
All questions